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

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

 

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

 

ผมจึงได้ทดลอง 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  

  

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

  

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

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

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

 

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

 

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

 

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

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

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

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

ผลที่ได้

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

ผลที่ได้

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