วิธีสร้าง Menu บน Blogger ด้วย Gadget PageList

ต่อเนื่องจากบทความ วิธีสร้าง Menu สวย ๆ ด้วย Gadget Linklist บน Blogger  ในบทความนี้ผมจะนำเสนอการสร้างเมนูบน Blogger ด้วย Gadget อีกชนิดหนึ่ง คือ Gadget Pagelist หรือภาษาไทยเรียกว่า Gadget หน้าเว็บ 

สอนทำบล็อก

วิธีการสร้างเมนูด้วย Gagdget Pagelist จะมีความคล้ายคลึงกันกับการใช้ Gadget Linklist แต่ในที่นี้ผมจะตัด Search Box ออกไป ให้มีเพียง Link ของเมนูเท่านั้น และ จะใช้พื้นหลังในตัวอย่างเป็นพื้นสีดำเพื่อให้นำไปใช้กับ Templats ที่มี Theme สีเข้มได้ง่ายขึ้น

สอนสร้างบล็อก

สำหรับตัวอย่างของเมนูนี้คุณสามารถดุได้ที่ >> Navigation Munu Using Pagelist Gadget DEMO


วิธีการติดตั้ง

Login เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ก่อนติดตั้งโค้ดให้เตรียมการ 2 อย่างต่อไปนี้
1. ถ้าคุณไม่ชำนาญในการแก้ไข HTML ให้ Backup แม่แบบเอาไว้ก่อน
2. ถ้าหากคุณติดตั้ง Gadget หน้าเว็บอยู่ก่อนแล้ว ให้ลบทิ้งไปก่อน



ขั้นที่ 1 ติดตั้ง CSS โค้ด
 
ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ด ดังกล่าว


/* Navigation Menu Using Pagelist Gadget by Hackublog */
div#Topnav {width: 100%; margin: 0 0 5px 0; padding: 0; height: 30px;background: #000 none;}
div#Topnav-wrapper { margin: 0 auto; width: 98%; }
div#Topnavmenu { float: left; height: 30px;}
div#Topnavmenu ul { display: block; list-style-type: none; margin: 0 auto; padding: 0; height: 30px; float: left;}
div#Topnavmenu ul li { display: block; margin: 0; padding: 0; float: left; height: 30px;}
div#Topnavmenu ul li a, div#Topnavmenu ul li a:visited {
display: block; margin: 0; padding: 0 18px; height: 30px; line-height: 30px;
font-family: copperplate gothic light,Arial,Helvetica,sans-serif;font-size:10px; font-weight: bold;
color: #BBBBBB;outline: none;}
div#Topnavmenu ul li a:hover, div#Topnavmenu ul li a:focus {color: #ffffff;text-decoration: none;}

แนวทางการปรับแต่ง CSS ให้เข้ากับ Template ของคุณ

โค้ด #000  เป็นสีของพื้นหลังซึ่งตอนนี้ผมใช้สีดำ
โค้ด #BBBBBB คือสีของ Link ในเมนูตอนนี้ผมใช้สีเทา
และ โค้ด #ffffff เป็นสีของ Link ในเมนูเมื่อนำเมาส์ไปชี้ (Mouse Over)

คุณสามารถปรับเปลี่ยนเป็นสีที่ชอบได้ตามใจ ซึ่งผมแนะนำให้ใช้โปรแกรม Hex Color Finder ในการระบุโค้ดสีจะทำให้เร็วขึ้นมาก




ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการระบุตำแหน่งให้เมนูด้วย HTML ซึ่งทำโดย

ให้ค้นหาโค้ด <div id='outer-wrapper'> แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว    

<div id='Topnav'>
<div id='Topnav-wrapper'>
<div id='Topnavmenu'>
<b:section class='Topnavmenu' id='Topnavmenu' preferred='yes' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</div>
</div>
</div>

จากนั้นให้ทำการบันทึกแม่แบบ



ขั้นที่ 3 วิธีการเพิ่ม List ในเมนู

เนื่องจากเมนูชนิดนี้สร้างจาก Gadget หน้าเว็บ ดังนั้นถ้าเราต้องการเพิ่ม List ในเมนู ก็จะต้องทำการเพิ่มหน้าเว็บก่อน ซึ่งทำโดย

3.1 ไปที่แผงควบคุม >> การส่งบทความ >> แก้ไขหน้าเว็บ >> แล้วเลือกว่าจะเพิ่มหน้าเว็บใหม่ หรือจะลบหน้าเว็บที่มีอยู่แล้ว

สอนทำ blogger

สอนทำ blogspot

3.2 เมื่อเพิ่มหน้าเว็บหรือ ลบ หรือจัดการตามใจชอบแล้ว ให้มาที่ >> รูปแบบ >> องค์ประกอบของหน้า

สอนแต่งบล็อก

3.3 เราจะเห็นว่ามี Gadget หน้าเว็บปรากฎขึ้นมาแล้ว ให้เข้าไปแก้ไขโดย ลบชื่อ Gadget หน้าเว็บออก (ดูรูปด้านล่าง)

สอนทำบล็อกของ blogger
นอกจากนี้คุณยังสามารถลากปุ่มหน้าเว็บเพื่อสลับรายการ Link ของหน้าเว็บได้ด้วย
 

3.4 ขั้นสุดท้ายเมื่อบันทึก Gadget แล้วดูผลลัพธ์ก็จะได้ผลลัพธ์เช่นเดียวกับ DEMO หรือเหมือนกับรูปด้านล่าง

วิธีทำ blogger

ตอนนี้มีความคิดเห็น : 24 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณมากเลยครับ

  1. @laonped

    ยินดีครับผม

  1. รบกวนช่วยแก้ไขด้วยครับ คือผมลองทำตามแล้วพอบันทึก มันขึ้นว่าเราไม่สามารถบันทึกแม่แบบของคุณ
    โปรดแก้ไขข้อผิดพลาดด้านล่าง และส่งแม่แบบของคุณอีกครั้ง
    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูป แบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: The element type "div" must be terminated by the matching end-tag "
    http://joinmart-online.blogspot.com/ ครับ

  1. อ้อ ได้แล้วครับ แต่มีปัญหาคือ เปิดด้วย firefoxจะไม่มีพื้นหลังขึ้น แต่ถ้าเปิดด้วย IE มีพื้นหลังขึ้น แต่เวลาย้าย แถบพื้นหลังจะไม่มาด้วย ต้องแกยังไงครับ

  1. @Mr.Natha :
    เปลี่ยนโค้ดบบรรทัดด้านล่างนี้
    div#Topnav {width: 100%; margin: 0 0 5px 0; padding: 0; height: 30px;background: #000 none;}
    เป็น
    div#Topnav {width: 100%; margin: 0 0 5px 0; padding: 0; height: 30px;background: #000;}
    ลองดูครับ

  1. ลองดูแล้วครับ เป็นเหมือนเดิม

  1. @Mr.Natha : ถ้าจะให้ผมช่วยดูจริง ๆ ต้องดาวน์โหลดแม่แบบมาครับ เพราะการดู โค้ดจากภายนอกมันไม่เห็นทั้งหมด ตอนนี้คงบอกอะไรไม่ได้ครับ เพราะปัญหามันเิกิดขึ้นกับ Template ของคุณคนเดียวครับ

  1. ในขั้นที่สองต้องมี </div> ปิดท้ายอีกตัวนึงครับ

  1. ขอบคุณที่แจ้งมาครับ แก้ให้แล้วครับผม

  1. รบกวนหน่อยนะคะ
    นุชใช้ template พื้นฐาน >> Simple แม่แบบโดย Josh Peterson
    ที่มีอยู่กับ blogspot อยู่แล้วค่ะ และอยากทำตัวเมนูตามในบทความหน้านี้

    แต่ว่าหา <div id='outer-wrapper'> ในขั้นตอนที่ 2 ไม่เจอค่ะ
    ก็เลยลองแก้ตามแค่ขั้นตอนที่ 1 ซึ่งพอ save แล้ว ก็เพิ่มแถบเมนูไม่ได้ค่ะ

    นุชต้องทำยังไงเพิ่มเหรอค่ะ ช่วยตอบหน่อยนะคะ : )

  1. สวัสดีครับคุณนุช : ขออธิบายเป็นข้อ ๆ แล้วกันนะครับจะได้ทำตามได้ง่าย
    1. ให้ลบโค้ดในขั้นที่ 1 ทิ้งออกไป
    เหตุผลเพราะว่าแม่แบบที่คุณนุชใช้มี Gadget ของเมนูมาให้อยู่แล้ว

    2. วิธีเรียกใช้เมนูที่ติดตั้งมากับแม่แบบอยู่แล้วคุณนุชแค่เพียงเพิ่มหน้าเว็บขึ้นมา แล้วเมนูจะปรากฎขึ้นมาโดยอัตโนมัติ โดยคุณนุชสามารถอ่านวิธีการเพิ่มหน้าได้จาก
    http://www.hackublog.com/2010/01/gadget-blogger.html

    โดยในบทความที่ว่านี้ให้อ่านเฉพาะวิธีเพิ่มหน้าก็พอ

    3. เมื่อทำได้แล้วอยากให้ลิงค์เชื่อมโยงไปที่อื่น ๆ ก็แนะนำบทความนี้เพิ่มครับ
    http://www.hackublog.com/2010/06/special-links-to-pagelist-gadget.html

    สงสัยยังไงถามเพิ่มเติมได้ครับ

  1. ทำได้แล้วค่ะ ขอบคุณมากๆ เลยนะคะ ((งมมา 3 วัน พอชี้แนะปั๊บ..ทำตามได้ภายใน 3 นาที))

    คุณเขียนบทความและใส่ภาพประกอบได้ละเอียดดีมากๆ เลย
    ทำให้นุชทำตามไ้ด้แบบไม่สงสัย ค่อยๆ อ่านไป ทำไป ก็ทำได้

    ขอบคุณอีกครั้งหนึ่งนะคะ (-/\-)


    ลป.แถมยังตอบเร็วอีกด้วย น่ารักมากค่ะ :D

  1. ขอบคุณสำหรับคำแนะนำดีๆ

  1. ลองหาโค้ด "]]>" ใน template แล้ว แต่ไม่มีน่ะค่ะ (ติ๊กถูกตรง Expand Widget Templates แล้วค่ะ)

    http://bypennystocks.blogspot.com/

  1. @By Penny Stocks แม่แบบที่คุณใช้เป็นแม่แบบ blogger รุ่นใหม่ครับ สมารถเพิ่มเมนูได้โดยใช้ Gagdet Pagelist ได้เลยครับ อ่านที่บทความนี้ครับผม
    http://www.hackublog.com/2010/01/gadget-blogger.html

  1. รบกวนสอบถามนิดนึงนะคะ

    ในกรณีที่เราใช้ template พื้นฐาน แล้วต้องการเพิ่มหน้าอย่างเดียว
    โดยทำตาม http://www.hackublog.com/2010/01/gadget-blogger.html
    แต่ผลปรากำว่ามันไม่สามารถเพิ่มหน้าได้ ขึ้นแต่คำว่า " ไม่สามารถบันทึกได้ และ Not Found - Error 404"
    อันนี้เกิดจากสาเหตุอะไร ควรแก้ไขอย่างไรดีคะ

  1. โหลด theme blogger มาใส่แล้วทีนี้อยากจะลบ Search Box ออกต้องทำยังไงคะ มันอยู่ข้างบนบังเมนูอยู่อะค่ะ

    รบกวนหน่วยนะคะ

  1. พีชาย ผมอยากเอาแถบนำทางออกทำไงแบบพี่นะ

  1. วิธีสร้าง Menu บน Blogger ด้วย Gadget PageList

    ขั้นตอนที่2ครับทำยังไง

  1. รบกวนหน่อยครับ ถ้าจะเอาmenuอยู่ด้านบนheaderยังไงหรอครับ อันนี้บล็อกผมครับhttp://greenistudio.blogspot.com

  1. ผม งง มากเลยครับ ผมหา Gadget หน้าเว็บ ไม่เจอ มันบอกว่าติดตั้งแล้ว
    แต่ผมหาแล้วก็ไม่เจอ ครับ งง

  1. ของผมกดเซฟในgadgetข้อความไม่ได้ไม่รู้ว่าบล๊อกเป็นอะไรใครนฃรู้บ้างครับช่วยตอบที

  1. จะสร้างเมนูบนบล็อก นี้ http://i-here-kung.blogspot.com/ ยังไงดีคะ สร้างไม่ได้อ่ะคะ รบกวนด้วยค่ะ

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

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel