วิธีเพิ่มขนาด Avatar ของ Jcomments

Jcomments คือ อะไร?
Jcommentsก็คือ หนึ่งในสุดยอดระบบคอมเมนต์สำหรับ joomla

จุดเด่น คือ:
-รองรับหลายภาษา รวมถึง ภาษาไทยด้วย (ซึ่งผมเองเป็นผู้แปล)
-ใช้ง่ายมากๆ
-มีระบบ Smiles
-สามารถกำหนด BBCode เองได้
-สามารถนำเข้าคอมเมนต์จากคอมโพเน้นท์ฺอื่นๆ
-และอื่นๆ อีกมากมาย

ทดลองใช้ได้ที่นี่:
Demo JComments

ดาวน์โหลด JComments ได้ืที่นี่:
Download JComments

จากการที่ผมลองใช้ดูแล้วถือว่าเป็นคอมโพเน้นท์ที่ดีมากๆ เสียอยู่อย่าง คือ Avatar เล็กไปนิด (แค่ 32x32 พิกเซลเองครับ)

ดูรูปครับว่าเล็กแค่ไหน

ถ้าใครอยากจะเพิ่มขนาดของ Avatar ล่ะก็... ง่ายๆครับทำตามนี้:


ขั้นตอนที่ 1: เปิดไฟล์ style.css
อยู่ที่นี่ครับ(/components/com_jcomments/tpl/default/style.css)

ขั้นตอนที่ 2: จากนั้นมองหาบรรทัดนี้:

/* Avatar */
#comments .comment-avatar img {width: 32px}

ขั้นตอนที่ 3: แก้ขนาดตามใจชอบครับ แต่ใหญ่ไปก็จะแตกครับ เอาพอดีๆ: (ผมแก้เป็น 48 พิกเซล)

/* Avatar */
#comments .comment-avatar img {width: 48px}

เสร็จแล้วครับ: เซพไฟล์ style.css, จากนั้นอัพโหลดกลับไปที่เดิม แล้วเปิดหน้าเว็บดูผลครับ!!

Avatar ใหญ่ขึ้นแล้วนะครับ :)

---

Webmaster of Thai Othello Page

อ่านต่อ...

วิธีเปลี่ยน Collation ฐานข้อมูลให้เป็น UTF-8

วิธีเปลี่ยน Collation ฐานข้อมูลให้เป็น UTF-8 เพื่อแก้ปัญหาภาษาไทยเป็น ??????

ผู้ให้บริการเว็บโฮสติ้งใหม่ๆ มักจะใช้ Cpanel และFantastico installer ซึ่งก็สะดวกมากๆนะครับในการติดตั้ง Joomla หรือ CMS อื่นๆ แค่คลิกทีเดียวก็ติดตั้งเสร็จทันที

หน้าตาของ Cpanel

แต่ก็มีข้อเสียบ้างเช่นกัน, เพราะบางโฮสต์ (ต่างประเทศ) ได้ตั้งค่า collation ในฐานข้อมูลไว้เป็น Latin Swedish เลย ซึ่งถ้าเราจะทำเว็บภาษาไทย หรือ จีน หรือ เกาหลีนี่ ต้องแก้ฐานข้อมูลให้เป็นUTF-8 ครับ

แก้ยังไงเนี่ย???

เพราะถ้าฐานข้อมูลไม่เป็น UTF-8 แล้ว การแสดงผลภาษาไทยก็จะเพี้ยนเหมือนในรูปด้านล่างครับ

อ่านไม่ออกแฮะ ^^''

แต่ไม่ต้องกลัวครับ ทุกปัญหาย่อมมีทางออกเสมอ :)


การจะเปลี่ยน collation ของฐานข้อมูล จริงๆ แล้วง่ายๆ สามารถทำด้วย notepad หรือ dreamweaver ก็ได้ครับ
แต่อาจจะไม่สะดวกเท่าไร ถ้าฐานข้อมูลเยอะมากๆ ดังนั้นผมจะสอนวิธีที่ง่าย+สะดวกที่สุดครับ

ขั้นตอนที่ 1. ให้ไปดาวน์โหลด เครื่องมือสำหรับเปลี่ยน collation ของ phoca ครับ ชื่อไฟล์ว่า tool_phoca_changing_collation.zip คลิกที่นี่เพื่อไปหน้าดาวน์โหลดครับ เจ๋งสุดๆครับ

ขั้นตอนที่ 2. หลังจากโหลดมาที่เครื่องเราแล้ว คลิกขวาแตกไฟล์ไว้ที่ Desktop เลย(ใช้ WinZip หรือ WinRAR หรืออื่นๆ ตามสะดวก)



ขั้นตอนที่ 3. พอแตกมาแล้วจะพบกับโฟลเดอร์ชื่อว่าtool_phoca_changing_collation.... (ชื่อมันยาวไปหน่อยครับ) ให้เปลี่ยนชื่อ(Rename) ของโฟลเดอร์ซะ เอาเป็นคำว่า collation นะครับ สะดวกดี

เปลี่ยนชื่อโฟลเดอร์ให้เป็นชื่อว่า collation

ขั้นตอนที่ 5. อัพโหลดโฟลเดอร์ไปไว้ที่ Root ของเว็บไซต์เราครับ




ขั้นตอนที่ 6. โอเคครับ ใกล้เสร็จแล้ว... จากนั้นเปิด Firefox หรือ IE ก็ได้ แล้วกรอก URL ตามนี้นะ: (โดเมนเนมของคุณ/collation/index.php)




ขั้นตอนที่ 7. จากนั้นก็จะเจอหน้านี้ครับ



ขั้นตอนที่ 8. ก็กรอกข้อมูลลงไปให้ครบ แล้วก็คลิกปุ่ม Submit

• Database Host: ใส่ชื่อโฮสต์


• Database User: ใส่ username ที่ใช้เวลาติดต่้อฐานข้อมูล


• Database Password: ใส่ รหัสผ่าน ที่ใช้เวลาติดต่้อฐานข้อมูล


• Database Name: ใส่ชื่อ ฐานข้อมูล


• Database Collation: utf8_general_ci (ใครอยากแก้collation เป็นอย่างอื่นก็ตามสะดวกนะครับ)

ขั้นตอนที่ 9.เสร็จแล้วววววววววววว!!! ตอนนี้ฐานข้อมูลก็เปลี่ยนเป็น UTF-8 เรียบร้อยครับ ลองดูหน้าเว็บคุณสิ ภาษาไทยแสดงผลได้แล้วนะครับ :)





ขอขอบคุณ, ทีมพัฒนาของ Phoca ครับ สำหรับเครื่องมือดีๆอย่างนี้!!!

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีใส่โค้ด Iframe ในโมดูลของ Joomla

บางครั้งหากเราต้องการจะใส่โค้ด HTML ที่เป็น Iframeในโมดูลของ Joomla แต่สิ่งที่พบ คือ Joomla มักจะลบโค้ดของเราออกเสมอ เช่น ตัวอย่างโค้ดนี้...

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

ปกติน่าจะแสดงแบบนี้:

แต่ Joomla! ถ้าเราใส่โค้ดนี้ในโมดูลโดยตรงเลย: (ตามรูปด้านล่าง)

พอเราคลิกปุ่ม update ปุ๊บ เกิดอะไรขึ้นหว่า!! เอ...โค้ดหายไปไหนเนี่ย!!! ไม่มีอะไรเกิดขึ้นเลย แถมโค้ดยังถูกลบไปอีกด้วย

ไม่ต้องตกใจครับ จริงๆแล้วอันนี้ไม่ใช่ปัญหาหรอกครับ ปกติแล้ว WYSIWYG Editor ใน Joomla มักจะลบโค้ดบางประเภททิ้งเพื่อความปลอดภัยของระบบน่ะครับ(หากใครอยากรู้รายละเอียดว่าโค้ดไหนอะไรยังไงบ้าง ลองอ่านที่นี่กันดูครับ Joomla Filtering Options)

แล้วตกลงเราสามารถใส่โค้ดที่เป็น Iframe ในโมดูลได้หรือเปล่าเนี่ย?

ได้แน่นอนครับ ลองมาดูกันครับ ว่าทำอย่างไร



การจะใส่โค้ด iframe ในโมดูลนั้น ตอนจะสร้างโมดูลใหม่ เราต้องเลือกเป็น wrapper ครับ ไม่ใช่ custom HTML

- ไปที่หน้า Admin => Extensions=>Modules Manager=>คลิกที่ New แล้วเลือก Wrapper

- ลองดู Parameters ต่างๆ ตามรูปครับ:

- ถ้าใครไม่รู้ว่าต้องใส่อะไรบ้าง ลองไปดูโค้ด iframe ที่คุณต้องการนำมาใส่ครับ:

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

- ทีนี้ก็กรอกเลย

• Module Class Suffix -ปล่อยว่างไว้ก็ได้ (ถ้าใครต้องการอ่านเพิ่ิมเติมเกี่ยวกับmodule class suffix ก็คลิกที่นี่เลย)


• URL - แล้วแต่โค้ดiframeของคุณนะครับ


• Scroll Bars - แล้วแต่โค้ดiframeของคุณนะครับ


• Width - แล้วแต่โค้ดiframeของคุณนะครับ


• Height - แล้วแต่โค้ดiframeของคุณนะครับ


• Auto Height - เลือก Yes หรือ No ตรงนี้ไม่มีผล


• Auto Add - เลือก Yes


• Target Name - ชื่อของ Iframe - (เอาไว้สำหรับทำลิงก์ให้เปิดในหน้าต่างiframe ครับ ใครอยากรู้ว่า คือ อะไร ก็ลองดูที่นี่ ตัวอย่างการใช้ iframe name)

- หลังจากกรอกค่า parameters ต่่างๆ แล้วก็เซพ แล้ว Publish เลยครับ

- กลับมาดูที่หน้าเว็บเราจะเห็นโมดูล iframe ที่ต้องการแล้ว :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

กา่รทำไฟฟ้าด้วย Adobe Photoshop

เมื่อราวๆ เดือนก่อน ผมได้มีโอกาสออกแบบโปสเตอร์งานแข่งขันโอเทลโล่ชิงแชมป์ประเทศไทย ประจำปี 2552 ซึ่งทำด้วย Adobe Photoshop ครับ

หลายๆ คนน่าจะชอบนะครับ แต่ก็คงมีหลายคนอยากรู้ว่าทำไฟฟ้าแบบในโปสเตอร์ด้วย Photoshop นี่มันทำยังไงกันครับ ลองมาดูวิธีทำกันเลย...

ขั้นตอนที่ 1: สร้างไฟล์ใหม่ (ขนาดไหนก็ได้ครับ)ด้วย Adobe Photoshop จากนั้น กดปุ่ม 'D' ที่คีย์บอร์ด เพื่อรีเซตสี foreground และ background ใหม่(ให้เป็นดำกับขาว ตามรูป)

ขั้นตอนที่ 2: เลือก=> Filterแล้วก็เลือกRender=>Clouds 1 ครั้งครับ

ถ้าทำถูกต้องจะได้ผลตามรูปด้านล่าง:

ขั้นตอนที่ 3: ให้เลือก=> Filter แล้วเลือก Renderคลิกที่Difference Cloudsครับ

จะได้ตามรูป:

ขั้นตอนที่ 4: กดปุ่ม CTRL+I (ไอ) เพื่อกลับสี (Invert)

จะได้ตามรูป:

ขั้นตอนที่ 5: กดปุ่ม CTRL+L(แอล) จากนั้นให้เลื่อนลูกศรตัวกลางไปทางขวาครับ

ขั้นตอนที่ 6: ตอนนี้ก็ใกล้จะเสร็จแล้วนะครับ ให้ปรับสีเอาตามชอบใจเลย โดยกดปุ่มCTRL+U (ติ๊กที่ Colorize ด้วย) ก็ปรับสีจนกว่าจะได้ตามชอบนะครับ (ผมขอสีน้ำเงินละกัน)

ขั้นตอนที่ 7: หลังจากปรับสีจนชอบใจแล้ว ก็เซพครับ แนะนำให้เซพเป็นไฟล์ PSD นะครับ ตอนนี้เราก็ได้Effect เป็นไฟฟ้าตามต้องการแล้ว

ขั้นตอนที่ 8: คราวนี้พอจะนำไปใช้ครับ...

• เปิดไฟล์ไฟฟ้าที่เราทำก่อน


• ลบสีดำทิ้งครับ(สามารถทำได้โดยเลือก Select=> Color Range... =>ให้คลิกที่สีดำ แล้วก็กดปุ่ม Delete ที่คีย์บอร์ด)


• ที่เลเยอร์ไฟฟ้าของเรา ตรง Blending Mode: ใ้ห้ปรับเป็น Screen ครับ


• จากนั้นก็พร้อมใช้งานแล้ว เปิดไฟล์รูปที่อยากใส่ไฟฟ้า แล้วลากเอาเลเยอร์ไฟฟ้าไปไว้ด้านบนเลเยอร์รูปที่ต้องการนะครับ :)


• ปรับแต่งตามชอบใจ
• เสร็จแล้วครับ

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีปรับแต่งหน้าแรก Joomla!

ปกติแล้วเมื่อเราได้ติดตั้งJoomla!ครั้งแรกเลย หน้าแรก หรือหน้า Home ของเรานั้น รูปแบบของบทความจะจัดเรียงมาให้เป็นแบบนี้ครับ:

ถ้าใครไม่ชอบ หรือ ไม่ถูกใจรูปแบบหน้าแรกแบบเดิมๆที่ Joomla! จัดมาให้ตอนแรก สามารถเปลี่ยนได้นะครับ ลองมาดูวิธีกันเลย

ขั้นตอนที่ 1: ไปที่หน้า Admin=>เลือก Menus=>เลือก Main Menus

ขั้นตอนที่ 2:ลองดูที่ไอเทมแรกครับ ถ้ายังไม่ได้แก้อะไรมักจะอยู่อันแรก และชื่อว่าhome คลิกเข้าไปเลยครับ

ขั้นตอนที่ 3:พอคลิกเข้าไปลองดูด้านขวามือ, จะเห็นคำว่าParameters (Basic) ซึ่งตรงนี้แหละครับที่จะเป็นที่ๆเราจะปรับแต่งหน้าแรกของ Joomla!

ขั้นตอนที่ 4:หลายคนอาจจะสงสัยว่า อะไรคือ Leading, Intros, Columns และ Links ไม่ต้องห่วงครับ ผมทำรูปอธิบายมาให้แล้วครับ ลองดูที่รูปด้านล่างเลย

การตั้งค่า:
     # Leading= 1
     # Intros= 4
       Columns= 2
     # Links= 4

ขั้นตอนที่ 5:โอเค, คิดว่าคุณคงพอเข้าใจแล้วนะครับ ทีนี้ผมจะลองใส่ค่าต่างๆ ให้ดูว่าจะได้ผลลัพธ์ยังไง ลองมาดูกัน

การตั้งค่า:
     # Leading= 1
     # Intros= 4
       Columns= 1
     # Links= 0

ผลลัพธ์ก็จะได้ตามนี้:

แค่นี้คุณก็ปรับแต่ง หน้าแรกของ Joomla ได้ตามต้องการแล้ว ไม่ยากเลยใช่มั้ยครับ

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีเปลี่ยนโลโก้ Joomla

อันนี้ก็เป็นหนึ่งในคำถามที่พบบ่อยเช่นกันนะครับ
นั่นก็คือ อยากจะเปลี่ยนโลโก้ของJoomlaให้เป็นโลโก้เว็บของเราเอง ทำอย่างไร?
วิธีทำนั้นไม่ยากเลยครับ
แต่ก่อนที่เราจะทำ ผมอยากแนะนำให้ทุกคนใช้firefoxกันนะครับ เพื่อความสะดวก ใครยังไม่มีก็ไปโหลดกันครับ ดาวน์โหลด firefox

ขั้นตอนที่ 1.หลังจากที่ทุกท่านติดตั้ง firefox แล้ว ก็เปิดหน้าเว็บของท่านเลยครับ คลิกขวาที่ Joomla Logo เลือก View Background Image ครับ



ขั้นตอนที่ 2.เราจะเห็นรูปโลโก้ Joomla นะครับว่าอยู่ที่ไหนให้เซพมาไว้ที่เครื่องPCเราครับ




ขั้นตอนที่ 3.เปิดดูรูปครับว่าขนาดเท่าไหร่ และนามสกุลอะไร

ตัวอย่างนี้
ชื่อรูป: mw_joomla_logo
ขนาด: 298x75 pixels
นามสกุล: png


ขั้นตอนที่ 5.ออกแบบโลโก้ของคุณเองครับ ให้ขนาด กว้างxยาว เท่ากับโลโก้ Joomla เดิม จากนั้นเซพชื่อเดิม และนามสกุลเดิม (อาจจะเซพทับหรือเซพไว้คนที่ละกันก็ได้ครับ)
ผมออกแบบเล่นๆมาแบบนี้นะครับ

ขั้นตอนที่ 6.ต่อไปก็อัพโหลดขึ้นไปไว้ที่เว็บไซต์เราเลยครับ

จำได้มั้ยครับว่าควรอัพโหลดไปไว้ตำแหน่งไหน?
ที่นี่ครับ

Root/templates/ชื่อเทมเพลตที่เราใช้/images

หรือตัวอย่างนี้ก็คือ

Root/templates/rhuk_milkyway/images

ขั้นตอนที่ 7.เขียนทับไปเลยครับ ไม่ต้องกลัว



ขั้นตอนที่ 8.ลองกลับมาดูหน้าเว็บเราครับว่าโลโก้เปลี่ยนหรือยังครับ ดูด้วยFirefox หรือ IE ก็ได้ครับ



ขั้นตอนที่ 9.ถ้ายังไม่เปลี่ยนให้ลอง Clear Cache ดูครับ เปิดfirefox เลือก Tools=>Clear Private Data=>ติ๊กทุกอัน แล้วคลิกClear Private Data Now เลยครับ


เสร็จแล้ว เรียบร้อยครับ :)

หมายเหตุ

• รูปอาจจะใช้ชื่ออื่น หรือ ขนาดอื่น หรือนามสกุลอื่น ก็ได้ครับ แต่อาจจะต้องแก้ไข CSS ซึ่งผมขอไม่พูดถึงละกันครับ เดี๋ยวยาว อิอิอิ

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

Welcome to The Frontpage เอาออกอย่างไร (Joomla!)

หลังจากที่ผมได้เข้าร่วมเว็บบอร์ดหลักของJoomla มาได้เกือบปี
คำถามนี้เป็นหนึ่งในคำถามที่พบบ่อยมาก (Frequently Asked Question)
นั่นคือ ปกติแล้วเวลาเราติดตั้ง Joomla ใหม่ๆ
ที่หน้าแรกของเว็บไซต์ หรือ เรียกว่า โฮมเพจ จะมีคำว่า "Welcome to The Frontpage" อยู่
คำถาม คือ แล้วจะแก้หรือเอาออกอย่างไร จริงๆแล้วไม่ยากเลยครับ

Welcome to the frontpage ตามรูป

ขั้นตอนที่ 1 ไปที่หน้าAdmin ครับ เลือก Menus=> Main Menu



ขั้นตอนที่ 2 เลือก Home ครับ หรือ หน้าหลัก (ภาษาไทย)


ขั้นตอนที่ 3 จากนั้นเข้าไปที่ Parameters (Systems) เจอแล้วนะครับ Page Title ไงครับ อยากได้อะไรก็พิมพ์เลยครับ

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

Joomla! 1.5.9 ออกแล้วจ้า!!

หลังจากที่ทีมงานjoomla เพิ่งออกเวอร์ชั่น 1.5.8 ได้ไม่นาน พี่แกก็ออกเวอร์ชั่นใหม่ คือjoomla 1.5.9 แล้วครับ และยังบอกให้ทุกคนที่ใช้joomla 1.5.x รีบทำการอัพเกรดด้วยเพื่อความปลอดภัย

มีหลายเว็บไซต์ หรือ เว็บบอร์ด ที่ถามถึงการอัพเกรดเวอร์ชั่นนะครับ ว่าทำยังไง ซึ่งทางJoomla เองก็ได้ออกคู่มือการอัพเกรดเวอร์ชั่น joomlaออกมา
ซึ่งเขียนได้ดีมากๆครับ
แต่ถ้าใครอ่านแล้วยังมึน งง ว่าทำอย่างไร? ก็ลองอ่านวิธีทำด้านล่างของผมละกัน :)

อธิบายกันก่อน

     [ไม่จำเป็น] หมายถึง ขั้นตอนนี้อาจจะข้ามไปก็ได้
     [จำเป็น] หมายถึง ขั้นตอนนี้สำคัญ และจำเป็นต้องทำในการอัพเกรดเวอร์ชั่น

วิธีการอัพเกรดJoomla เวอร์ชั่น

1. [จำเป็น] เลือกไฟล์ที่จะดาวน์โหลดให้ถูกก่อนนะครับ จากนั้นทำการดาวน์โหลด
      Joomla 1.5.9 สามารถดาวน์โหลดได้ที่นี่

บางคนงงว่าควรดาวน์โหลดอันไหน
-ดูว่าตัวเองใช้เวอร์ชั่นอะไรก่อนครับ ถ้าใช้เวอร์ชั่น 1.5.7 ก็ให้โหลด joomla 1.5.7 to 1.5.9 package

ไฟล์มันมี 3 นามสกุล คือ .zip, .tar.gz, .tar.bz2 แล้วควรดาวน์โหลดอันไหน?
-ไม่ต้องกลัวครับ, ถ้าใช้WindowXp หรือ Vista ก็เลือกไฟล์นามสกุล zip
แต่ถ้าใ้ช้Linux ก็เลือก 2 อันหลัง

2. [จำเป็น] แบ็คอัพไฟล์ทั้งหมดบนโฮสต์มาไว้ที่เครื่องคอมพิวเตอร์ของเราครับ
      ตรงนี้ไม่ยากอะไร แ่ค่ใช้โปรแกรม ftp เช่นfilezilla
      จากนั้น copy ไฟล์ทั้งหมดของเราบนโฮสต์มาไว้ในเครื่องครับ (ตรงนี้อาจกินเวลานานมาก แนะนำให้ไปทำอย่างอื่นระหว่างรอ อิอิ)

ลองดูรูปประกอบวิธีการbackup fileครับ ง่ายๆ แค่เลือกไฟล์ทั้งหมด dragมาไว้ที่เครื่องเรา

3. [จำเป็น] แบ็คอัพฐานข้อมูล หรือ database ทั้งหมด
      ถ้าทำไม่เป็น ให้ลองดู VDO สอนวิธี export ฐานข้อมูลมายังเครื่องเราครับ

4. [ไม่จำเป็น] ตั้งค่าเว็บไซต์เราให้เป็นออฟไลน์ครับ
      ไปที่Admin=> Grobal Config=>Site Offline=>yes
      ตรงนี้ไม่จำเป็นต้องทำก็ได้ครับ แต่เพื่อความปลอดภัย ผมแนะนำว่าให้ทำครับ อาจจะทำตอนกลางคืนช่วงที่ไม่มีคนเข้าเว็บก็ได้ (แต่ถ้าอัพเกรดจาก joomla 1.0.x ไปเป็น Joomla 1.0.15 ตรงนี้จำเป็นนะครับ)

5. [จำเป็น] Extract หรือแตก ไฟล์ Packageที่เราโหลดมาจากขั้นตอนที่ 1มา extractในเครื่องคอมพิวเตอร์ของเรานะครับ
     ตรงนี้อาจจะใช้ WinZip, WinRAR ก็ได้ตามสะดวกครับ

6. [จำเป็น] อัพโหลดไฟล์ทั้งหมดที่เราแตกไว้ในเครื่องเราไปไว้บนโฮสต์ครับ เขียนทับทั้งหมด (overwrite all)
      ตรงนี้ก็ใช้เวลาพอควร แต่ไม่นานเท่าไหร่ครับ
7. [จำเป็น] หลังจากอัพโหลดเสร็จแล้ว เข้าไปLoginหน้า Admin อีกครั้ง ตรวจดูว่ามีคำเตือนอะไรขึ้นมาหรือเปล่า ให้ปฏิบัติตามครับ
8. [ไม่จำเ้ป็น] ถ้าใครตั้งค่าเว็บไซต์เป็นออฟไลน์ไว้ใ้ห้ไปแก้เป็นออนไลน์อีกครั้งครับ
      โดยไปที่ Admin=> Grobal Config=>Site Offline=>no
9. [จำเป็น]ลองเช็คหน้าเว็บดูว่ามีปัญหาหรือเปล่า เช็คอย่างละเอียดนะครับ
10. ถ้าไม่มีปัญหาอะไรก็เรียบร้อยครับ สำหรับการอัพเกรดเวอร์ชั่น ไม่ยากเลยนะครับ :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีอัพเกรดเวอร์ชั่น Mamboboard

ถ้าคุณเป็นคนหนึ่งที่ใช้mamboboard และต้องการอัพเกรดเวอร์ชั่น
Mamboboardเวอร์ชั่นล่าสุดสามารถดาวน์โหลดได้จากเว็บไซต์หลักของmamboboard
แต่น่าเสียดาย... เว็บนั้นกลับไม่ได้พูดถึงวิธีการอัพเกรดเวอร์ชั่นเลยว่าทำอย่างไร??
ไม่ต้ิองห่วงครับ ผมเองก็ใช้mamboboardเหมือนกัน
ลองมาดูวิธีอัพเกรดกันเลย

อธิบายกันซักนิด
[ไม่จำเป็น] หมายถึง ขั้นตอนนี้อาจจะข้ามไปก็ได้ ไม่จำเป็นต้องทำ หากคุณไม่ได้ดัดแปลงอะไรเลย จากmamboboard เวอร์ชั่นที่คุณใช้อยู่ (บางขั้นตอนแม้จะไม่จำเป็นแต่ก็ควรทำ)
[จำเป็น] หมายถึง ขั้นตอนนี้จำเป็นต้องทำนะครับในการอัพเกรด

วิธีการอัพเกรด
1. [ไม่จำเป็น] ให้ปิด (unpublish) เมนูที่ลิงก์ไปmamboboardก่อนครับ
2. [ไม่จำเป็น] เซตค่าmamboboardให้เป็นoffline (ในmamboboard configuration)
3. [ไม่จำเป็น] แบ็คอัพฐานข้อมูลครับ (เข้าหน้าphpmyadmin ดูแถวที่มีคำว่า _sb_ ทั้งหมด)
4. [ไม่จำเป็น] แบ็คอัพเทมเพลตที่ใช้ หากทำการดัดแปลงเทมเพลต ถ้าไม่ได้ดัดแปลงอะไรก็ไม่จำเป็นครับ (Root/components/com_mamboboard/templates)
5. [ไม่จำเป็น] แบ็คอัพอีโมติคอน หากทำการดัดแปลงอีโมติคอน ถ้าไม่ได้ดัดแปลงอะไรก็ไม่จำเป็นครับ (Root/components/com_mamboboard/emoticons)
6. [ไม่จำเป็น] แบ็คอัพไฟล์ rules.txt (Root/components/com_mamboboard/rules.txt)
7. [ไม่จำเป็น] แบ็คอัพ avatars (รูปตัวแทน)ของผู้ใช้ (Root/components/com_mamboboard/avatars)
8. [จำเป็น] แบ็คอัพไฟล์และรูปที่ผู้ใช้อัพโหลดนะครับ (Root/components/com_mamboboard/uploaded)
9. [จำเป็น] Uninstall Mamboboard ในหน้าadminครับ
10.[จำเป็น] Install mamboboard เวอร์ชั่นใหม่
11.[จำเป็น] เอารูปและไฟล์ที่เราแบ็คอัพไว้ upload กลับไปที่เดิม
12.[ไม่จำเป็น] อัพโหลด avatars กลับไปที่เดิม
13.[ไม่จำเป็น] อัพโหลด rules.txt
14.[ไม่จำเป็น] อัพโหลด อีโมติคอน กลับไปที่เดิมครับ (ถ้าไม่ได้ดัดแปลงอีโมติคอน ก็ไม่จำเป็นครับ)
15.[ไม่จำเป็น] อัพโหลด เทมเพลตที่เราดัดแปลง กลับไปที่เดิม
16.[จำเป็น] จากนั้นให้สร้างmenu ใหม่ลิงก์ไปหาmamboboard ครับ
17.เรียบร้อย :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

ทำเว็บให้น่าสนใจยิ่งขึ้นด้วย Lightbox

เดี๋ยวนี้เว็บไซต์ใหม่ๆ มักจะใช้ lightbox กันนะครับ ไม่ว่าจะทำแกลลอรี่ หรือ ใส่บริเวณรูปในบทความก็ตาม
ถ้าใครยังไม่รู้จักว่า Lightbox คืออะไร ลองคลิกที่รูปตัวอย่างด้านล่างดูครับ...

น่าสนใจใช่มั้ยครับ? คราวนี้เรามาลองดูวิธีทำกัน!

ขั้นตอนที่ 1. ไปโหลด lightbox (ไฟล์ Zip) ที่เว็บนี้ก่อนนะครับ

http://www.huddletogether.com/projects/lightbox2/

ขั้นตอนที่ 2. พอโหลดมาลงเครื่องแล้วก็ Extract เลยครับ

ขั้นตอนที่ 3. จากนั้นไฟล์ที่Extractออกมา่จะเป็นโฟลเดอร์ชื่อ lightbox2.04 เปิดเข้าไปดูเลยครับ จะเจอไฟล์ index.html ซึ่งมีคู่มือการใช้อยู่ ถ้าใครอ่านรู้เรื่องทำเป็นแล้วก็ไม่ต้องอ่านบล็อกผมต่อแล้วล่ะครับ อิอิอิ แต่ถ้าไม่รู้เรื่องก็ลองอ่านขั้นตอนต่อไปเลย :)

ขั้นตอนที่ 4. เพื่อความเข้าใจเบื้องต้นนะครับ ให้คุณเตรียมรูปอย่างน้อยซัก 3 รูปครับ จากนั้นตั้งชื่อ สมมติว่าเป็น picture01.jpg, picture02.jpg, picture03.jpg

ขั้นตอนที่ 5. จากนั้นให้Resizeทั้ง 3 รูปเลยครับ แล้วตั้งชื่อว่า picture01-thumbnail.jpg, picture02-thumbnail.jpg, picture03-thumbnail.jpg
ตอนนี้คุณมี 6 รูปแล้วนะครับ ให้เอาไปรวมกันที่โฟลเดอร์เดียว
ผมสมมติชื่อ folder เป็น example-pics ครับ
ขั้นตอนที่ 6. ให้อัพโหลดโฟลเดอร์ example-pics ไปที่เว็บไซต์ของคุณนะครับ ตัวอย่างนี้ผมอัพโหลดไปไว้ที่ตำแหน่งrootนะครับ ตามนี้

Root/example-pics

รูปแสดงวิธีการอัพโหลดโฟลเดอร์ example-pics ด้วย filezilla

ขั้นตอนที่ 7.คราวนี้กลับมาดูที่โฟลเดอร์lightbox2.04 เพื่อความสะดวกให้คุณเปลี่ยนชื่อโฟลเดอร์นี้เป็นlightboxเฉยๆนะครับ ไม่ต้องมี 2.04
ขั้นตอนที่ 8.ต่อไปก็อัพโหลดโฟลเดอร์lightboxไปที่เว็บไซต์ของคุณเลย ตัวอย่างนี้ผมอัพโหลดไปที่ rootนะครับ

Root/lightbox

ขั้นตอนที่ 9.โอเคครับ, ให้นำโค้ดนี้ไปใส่ใน template html นะครับ ระหว่าง tag <head>...</head>

<link rel="stylesheet" href="URLเว็บไซต์คุณ/lightbox/css/lightbox.css" type="text/css"
media="screen" />
<script src="URLเว็บไซต์คุณ/lightbox/js/prototype.js" type="text/javascript">
</script>
<script src="URLเว็บไซต์คุณ/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
</script>
<script src="URLเว็บไซต์คุณ/lightbox/js/lightbox.js" type="text/javascript">
</script>

อย่าลืมเปลี่ยนคำว่า"URLเว็บไซต์คุณ"ด้วยนะครับ :)

ขั้นตอนที่ 10.และเวลาจะใช้lightboxก็ให้ใช้โค้ดนี้ครับ

<a href="URL ของรูปขนาดเต็ม" rel="lightbox" title="ใส่ชื่อรูป">
<img src="URL ของรูป thumbnail" alt="ใส่ชื่อรูป" /></a>

สำหรับตัวอย่างนี้ (หมายถึง 6 รูปที่เตรียมไว้ในขั้นตอนที่4-5) โค้ดก็จะเป็นแบบนี้ครับ:

<a href="http://www.เว็บของคุณ.com/example-pics/picture01.jpg" rel="lightbox" title="picture01">
<img src="http://www.เว็บของคุณ.com/example-pics/picture01-thumbnail.jpg" alt="picture01" /></a>

<a href="http://www.เว็บของคุณ.com/example-pics/picture02.jpg" rel="lightbox" title="picture02">
<img src="http://www.เว็บของคุณ.com/example-pics/picture02-thumbnail.jpg" alt="picture02" /></a>

<a href="http://www.เว็บของคุณ.com/example-pics/picture03.jpg" rel="lightbox" title="picture03">
<img src="http://www.เว็บของคุณ.com/example-pics/picture03-thumbnail.jpg" alt="picture03" /></a>

ขั้นตอนที่ 11.ทำเสร็จแล้วก็ลองเปิดดูนะครับ ชื่นชมผลงานซักหน่อย 555 :)

หมายเหตุ:

• หากมีรูปที่เกี่ยวข้องกัน อยากจะทำเป็นกลุ่มเดียวกัน เช่น ใน 100 รูป อาจจะมี กลุ่มรูปรถยนต์ 50 รูป กลุ่มรูปต้นไม้ 30 รูป กลุ่มอื่นๆ 20 รูป เราอาจจะใส่โค้ดเพิ่ม [ชื่อกลุ่ม] ไว้หลังโค้ดตรงนี้ rel="lightbox[ชื่อกลุ่ม]" ซึ่งมีประโยชน์เมื่อเปิดดูรูปใดรูปหนึ่งในกลุ่มดังกล่าวแล้ว จะสามารถใช้แป้นลูกศรบนคีย์บอร์ดเลื่อนรูปไปข้างหน้า หรือ ถอยหลัง ไปยังรูปถัดไปได้
• อาจจะลองประยุกต์ใช้lightbox กับ photoshop automate web photo gallery ดูก็ได้ครับ
  

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...