วิธีใส่ Link ที่ต้องการลงใน PageList Gadget

Gadget Pagelist บน Blogger หรือภาษาไทยเรียกว่า Gadget หน้าเว็บก็คือเมนูชนิดหนึ่งที่เชื่อมโยงไปยังหน้าเว็บภายใน Blogger ที่เราสร้างขึ้น ซึ่งคนที่ใช้แม่แบบที่ออกแบบจาก Blogger in Draft หรือ ออกแบบแม่แบบด้วยเครื่องมือของ Blogger ก็จะมีเมนูชนิดนี้ติดตั้งมากับแม่แบบด้วย

สอนทำบล็อก วิธีสร้างบล็อก

ปัญหาคือ Gadget หน้าเว็บนี้มีข้อจำกัด ไม่สามารถเชื่อมโยงไปยังบทความ หรือเว็บไซต์อื่นที่เราต้องการได้ เช่นรูปด้านล่างนี้คือ ตัวอย่างเมนูที่สร้างจาก Gadget Pagelist และเชื่อมโยงไปยังหน้า About Me หน้า Contact Me ที่ได้สร้างจาก Gadget หน้าเว็บเอาไว้ภายในบล็อก

วิธีทำบล็อก blogger blogspot

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

วิธีทำให้ Gadget Pagelistเชื่อมโยงไปยังที่อื่น ๆ ที่เราต้องการ

 ขั้นที่ 1 สร้างโค้ดของ Link ที่ต้องการ

ให้คุณสร้างโค้ดของ Link ที่ต้องการให้ Link ไปโดยใช้โค้ด

<li><a href='ใส่ URL ที่ต้องการเชื่อมโยงไป'>ข้อความของลิงค์ที่จะแสดง</a></li>

เช่นถ้าผมต้องการเชื่อมโยงไปยัง http://www.hackublog.com ผมก็สร้าง Link แบบนี้ครับ
<li><a href='http://www.hackublog.com'>Hackublog</a></li>
และถ้าต้องการ Link ไปหลาย ๆ แห่งก็สร้างเป็นชุดโค้ดแบบนี้ครับ
<li><a href='ใส่ URL 1'>ข้อความของลิงค์ที่จะแสดง 1</a></li>
<li><a href='ใส่ URL 2'>ข้อความของลิงค์ที่จะแสดง 2</a></li>
<li><a href='ใส่ URL 3'>ข้อความของลิงค์ที่จะแสดง 3</a></li>

หมายเหตุ
ถ้าต้องการให้คลิกที่ลิงค์แล้วเปิดในหน้าต่าง หรือใน tab ใหม่ก็แทรกโค้ด target="_blank" ลงไปในโค้ดของ Link ด้วย เช่น
<li><a href='http://www.hackublog.com' target="_blank">Hackublog</a></li>
หรือถ้าเป็นชุดของลิงค์ก็ใส่แบบตัวอย่างด้านล่าง
<li><a href='ใส่ URL 1' target="_blank">ข้อความของลิงค์ที่จะแสดง 1</a></li>
<li><a href='ใส่ URL 2' target="_blank">ข้อความของลิงค์ที่จะแสดง 2</a></li>
<li><a href='ใส่ URL 3' target="_blank">ข้อความของลิงค์ที่จะแสดง 3</a></li>





ขั้นที่ 2 วิธีเพิ่ม Link ใน Gadget Pagelist

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

สอนสร้าง blogger blogspot 

และคลิกขยายแม่แบบเครื่องมือ

วิธีทำ blogger blogspot 

จากนั้นให้ค้นหาชุดของโค้ดต่อไปนี้

<b:widget id='PageList1' locked='false' title='หน้าเว็บ' type='PageList'>

โดยอาจจะกด Ctrl พร้อมกับปุ่ม F และใช้คำค้นว่า Pagelist1 จะทำให้พบโค้ดเร็วขึ้นและคุณจะพบชุดโค้ดเช่นเดียวกับรูปด้านล่าง

สอนสร้างบล็อก สอนแต่งบล็อก สอนทำบล็อก

จากนั้นให้นำโค้ดที่ได้เตรียมเอาไว้ในขั้นที่ 1 วางลงไปในตำแหน่งที่แสดงไว้ในรูปด้านบน ซึ่งจะได้ผลดังรูปด้านล่าง

วิธีทำ blogspot วิธีทำ blogger

เมื่อแทรกโค้ดเสร็จแล้วบันทึกแม่แบบซึ่งในตัวอย่างนี้ผมจะได้ผลลัพธ์ดังรูปด้านล่าง

วิธีทำเมนูบน Blogger

ถ้าต้องการเพิ่ม Link อีกก็แทรกโค้ดของ Link เพิ่มเข้าไปได้อีกตามต้องการ

 

 

ขั้นที่ 3 ปรับแต่งลำดับของ Link

คุณสามารถสลับลำดับของ Link ได้บ้าง โดยสลับตำแหน่งการวางดังรูปและผลลัพธ์ในตัวอย่าง

ตัวอย่างแรกวางถัดจากโค้ด <ul>

 

แต่งบล็อก

 

ผลที่ได้

 

ทำบล็อก blogspot

 

หรือถ้าคุณสลับตำแหน่งวางก็จะได้ผลลัพธ์เป็นอีกแบบ เช่นถ้าวางเหมือนในรูปด้านล่าง

 

สร้างบล็อก blogger

 

ผลที่ได้

 

สอนวิธีสร้างบล็อกของ blogger หรือที่เรียกว่า blogspot

 

เพียงขั้นตอนง่าย ๆ แค่นี้คุณก็สามารถใช้งาน Gadget PageList ได้คุ้มค่ามากขึ้นแล้วครับ ลองพลิกแพลงทำตามความต้องการของคุณดูครับ สงสัยเรื่องใดก็สอบถามเพิ่มเติมได้เลย สุดท้ายหวังว่าทุกท่านคงชอบเทคนิคที่นำเสนอในบทความนี้นะครับ   สวัสดีครับ

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

  1. แล้วถ้าหากต้องการให้ลิ้งที่เราต้องการไปอยู่ก่อนหน้า Link "หน้าแรก" ล่ะครับทำอย่างไร มีวิธีมั้ย

  1. @ Mr.JJ : ลองอ่านในบทความอีกรอบครับ

  1. เยี่ยมไปเลยครับ ใช้ได้ดีมากครับ

  1. @ wekkgg : ขอบคุณที่กลับมาแจ้งข่าวครับ ยังมีวิธีสร้างเมนูอีกหลายวิธีนะครับลองดูจากสารบัญในหมวด Create Menu ครับ

  1. มีวิธีทำหน้า index ที่เป็น Enter Site เข้าสู่เวบ บ้างไหมครับ

  1. @ vc.taem : มีคนสอบถามมามากอยู่เหมือนกันครับ แต่ว่าใน blogger ยังทำระบบ login ไม่ได้ครับ ด้วยข้อจำกัดเรื่อง mysql เรื่องฐานข้อมูลในการเก็บข้อมูลสมาชิก และการใช้ภาษาPHP

    เท่าที่ทำได้ตอนนี้คงเพียงแค่ตั้งค่าสิทธิ์คนเข้าชมบล็อกเท่านั้นครับ ซึ่งสามารถตั้งค่าได้โดยการกำหนด email ลงไปในสิทธิ์คนเข้าชมบล็อก ในเมนูการตั้งค่าครับ

  1. สวัสดีครับ ผมมีคำถามครับ คือผมหาชุด โค้ด page list ชุดแบบด้านบนไม่เจอครับเจอแต่

    description="Page Text" selector=".content-inner">



    ไม่รุ้ว่ามันเหมือนกันหรือเปล่าครับ รบกวนด้วยนะครับ

    ขอบคุณสำหรับข้อมูลดีๆครับ

  1. description="Page Text" selector=".content-inner">
    <Variable name="body.font" description="Font" type="font"
    default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
    <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#004bff"/>

  1. ลืม convert code ช่วยแนะนำด้วยนะครับ

  1. @ amzstation : ถ้าหมายถึง บล็อก http://baby-formula-station.blogspot.com/ คุณ amzstation ยังไม่ได้ติดตั้ง gadget pagelist ครับ ต้องติดตั้งก่อนครับ ส่วนโค้ดที่แจ้งมาเป็นค่าตัวแปรครับไม่ใช่โค้ดที่เรากำลังจะปรับเปลี่ยน

  1. ไม่ใช่ครับ เป็นอีกบล๊อกหนึ่งครับ บลีอกนี้ครับ http://cheap-watches-station.blogspot.com/ ซึ่งผมได้ทำ ไว้ 3 หน้า แต่ผมอยากจะเพิ่มเมนูและ ลิ้งค์ อีก คือแบบว่า เวลาคลิกแล้วมันส่งลิ้งค์ไปยังอีกหน้าในบล๊อกของเราเอง ไม่รู้ว่าจะงงไหม พอดีผมมือใหม่จริงๆครับ ยังไงแนะนำด้วยนะครับ ติชมบล๊อกด้วยก็ดีครับ

  1. @ amzstation : แม่แบบของคุณรู้สึกจะมีการดัดแปลงเล้กน้อย ถ้าจะให้ง่ายให้เปลี่ยนแม่แบบเดิมมาทับอีกครั้ง เพื่อให้โค้ดกลับเป็นปกติครับ

    ส่วนโค้ดในแม่แบบของคุณจะอยู่ในตำแหน่ง

    <div id="PageList1" class="widget PageList">

  1. @ ATTAPON : โค้ดเมนูจะอยู่ใน id เหล่านี้ หาโค้ดชุดนี้

    <div id='foxmenucontainer'>
    <div id='menu'>

    แล้ววิธีลบ หรือวิธีแก้ไขก็ดูจากบทความนี้ครับ

  1. ทำ log in ได้แล้วค่ะ ขอบคุณนะค่ะ :D

  1. ทำได้แล้วครับ ขอบคุณมาก

  1. ขอบคุณครับ อันนี้ นำไปใช้แล้ว เจ๋งดีๆ

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

  1. สุดยอด ละเอียดแบบเข้าใจเลยอ่ะ

  1. อีกหนึ่งอย่างที่ขอรับไปใช้นะคะ

  1. หาโค๊ด
    นี้ไม่เจอค่ะ บางเทมเพลตมี บางอันไม่มีนะค่ะ

  1. <b:widget id='PageList1' locked='false' title='หน้าเว็บ' type='PageList'>

    หาไม่เจอค่ะ

  1. @lillyconway: ต้อง add gadget pagelist ก่อนครับจึงจะพบโค้ด

  1. ขอบคุณค่ะ
    อีกคำถามค่ะ ถ้าจะขยายตัวหนังสือตรงส่วนนี้ Gadget Pagelist ต้องไปหาโค๊ด ขยายตรงส่วนไหนค่ะ

    มือใหม่จริงๆๆค่ะ พอดีทำออกมาแล้วมันตัวเล็กมากเลยค่ะ

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

  1. แล้วจะสร้างหน้าเว็บใหม่เพื่อจะเอามาเพิ่มฯยังไงครับ
    (ขอเป็นของบล็อคนะครับ...คือไม่อยากโยงไปข้างนอกครับ ขอบคุณครับ)

  1. แล้วถ้าผมจะเอามาอยู่ลำดัยที่2ทำยังไงครับ

  1. ไม่มี Gadget Pagelist แล้วหาแล้วไม่เจอเลย

  1. ขอบคุณมากๆๆๆคร่

  1. ขอบคุณค่า

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

  1. มือใหม่หัดทำคราฟ เว็บดูหนังออนไลน์ ติชมกันได้คับ
    http://nunghdonline.blogspot.com/
    http://nunghdonline.blogspot.com/

  1. สวัสดีครับ ขออนุญาตเรียนถาม พอดีอ่านแล้วลองทำแต่ไม่สำเร็จมาหลายวันแล้ว ด้วยว่ายังมือใหม่ ในวิดเก็ต หน้าเว็บที่เราสามารถเพิ่มหน้าเว็บเข้าไปได้นั้น เราจะแก้โค๊ดยังไงครับให้หน้าเว็บที่เราสร้างขึ้นมานั้น โชว์รวมป้ายกำกับของบทความที่เราสร้างขึ้นมา มาไว้ในหน้าเว็บที่เราต้องการ อย่างเช่นผมอยากให้บทความ ไดอารี่ทั้งหมดที่ผมเขียนมารวมอยู่ในหัวข้อหน้าเว็บไดารี่ที่สร้างขึ้นมา ผมสังเกตุว่ามันขึ้น search/label/Diary%20ไดอารี่ ผมลองเข้าไปแก้ใน HTML แล้วแต่ไม่ขึ้นอะไรเลยครับ บล็อกของผมครับ http://www.akeybreakystyles.blogspot.com
    เหมือนอย่างในบล็อกของคุณ hackublog ที่รวมบทความ Create Menu ไว้ในหน้าเว็บด้านบน ทำยังไงครับขอบคุณล่วงหน้าครับ

  1. ขอโทษนะครับ ทำได้แล้วครับ

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

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

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