วิธีเปลี่ยน Label Gadget ให้เป็นแบบ Dropdown



โดยปกติเมนูป้ายกำกับ หรือ Label Gadget จะสามารถปรับเปลี่ยนได้บ้างเล็กน้อยคือ

ปรับให้แสดงผลแบบรายการ (list)

Label gadget2
หรือปรับให้เป็นแบบเมฆ (Tag cloud)

tagcloud-bards-to-blogs


แต่เราก็ยังสามารถ Hack ให้มีการแสดงผลอย่างอื่นได้ เช่น ทำให้มีการแสดงผลแบบ Animation ซึ่งผมเคยได้นำเสนอไปในบทความ “สร้างหมวดหมู่ให้บทความด้วย Flash Animation

blogumus2
หากท่านใดยังไม่ได้อ่านก็ลองเข้าไปศึกษาดูครับ


ส่วนบทความก็จะนำเสนอวิธีดัดแปลง Label Gadget ให้เป็นแบบ Dropdown  เผื่อว่าใครอยากลดการใช้พื้นที่ที่ Sidebar การ Hack นี้ก็จะช่วยได้มากเลยครับ

Dropdown เป็นยังไง ถ้านึกไม่ออก ก็ลองคลิกข้างล่างนี้ดูครับ



เอาล่ะครับอารัมภบทมานอนพอสมควร เข้าสู่วิธีทำกันเลยครับ


ขั้นตอนการทำ

เตรียมตัว หากใครไม่เคยชินกับการแก้ไข HTML ให้ทำการ Backup Template ไว้ก่อนครับ >> คลิกดูวิธีทำที่นี่ เพราะหากเกิดความผิดพลาดก็เรียกของเก่ากลับมาได้เหมือนเดิมครับ

ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ  >> แก้ไข HTML >> คลิกขยายแม่แบบเครื่องมือ

จากนั้นค้นหาโค้ด

<ul>
     <b:loop values='data:labels' var='label'>
       <li>
         <b:if cond='data:blog.url == data:label.url'>
           <data:label.name/>
         <b:else/>
           <a expr:href='data:label.url'> <data:label.name/> </ a>
         </b:if>
         (<data:label.count/>)
       </li>
     </b:loop>
     </ul>



เทคนิคการค้นหา : ให้กด Ctrl + F แล้วใช้ คำค้น เป็น
(<data:label.count/>)
จะทำให้พบชุดของโค้ดดังกล่าวได้เร็วมากครับ

ขั้นที่ 2 เมื่อพบโค้ดดังกล่าวแล้วให้แทนที่โค้ดทั้งหมดด้วยโค้ดต่อไปนี้

<br/>
  <select onchange='location=this.options[this.selectedIndex].value;'>
     <option> Select a label </option>
     <b:loop values='data:labels' var='label'>
        <option expr:value='data:label.url'> <data:label.name/>
           (<data:label.count/>)
        </option>
     </b:loop>
  </select>


เมื่อแทนที่แล้วก็บันทึกแม่แบบ เท่านี้ก็จบขั้นตอน ได้ Label gadget แบบ Dropdown ตามต้องการแล้ว

หมายเหตุ โค้ด <br/> ตัวแรกใส่เพื่อเว้นระยะห่าง 1 บรรทัดให้ดูสวยงามเท่านั้น ถ้าไม่ชอบก็สามารถลบโค้ด <br/> ทิ้งได้ครับ

หากมีข้อสงสัยใด ๆ ก็สามารถสอบถามเพิ่มเติมได้ที่กล่อง comment ด้านล่างได้เลยครับผม thumbsup

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

  1. ผมมองไม่เห็นหลังจากที่สร้างเสร็จทำไงดีครับ ผมเริ่มงงแล้ว หรือว่าเราต้องสร้างลิ้ง หรือบทความอะไรก่อนหรือเปล่า เริ่มจะงงแระ รบกวนตอบให้กระจ่างหน่อยครับ จุดประสงค์ผมคือ อยากจะสร้าง โดยให้ drop down ลงมาเป็นชื่อรุ่นต่างๆหรือผมต้องทำหน้บล็อกรองรับก่อนใช่ไหมครับ งง!!!!!!!

  1. @ amzstation : ตอนนี้คุณใช้งาน gadget ป้ายกำกับเป็นหรือยังครับ ถ้ายังอ่านบทความพื้นฐานในหน้าแรกให้เข้าใจก่อนนะครับ คุณไม่เข้าใจตั้งแต่เริ่มต้น แล้วต้องการทำข้ามขั้นตอนก็งงเป็นธรรมดาครับ

    เอาเป็นว่าคุณอ่านบทความนี้
    http://www.hackublog.com/2009/09/blog-post_3320.html

    แล้วใส่ป้ายกำกับให้เป็นชื่อของรุ่น แค่นี้แหละครับ

  1. ทำ label ให้เป็นแบบเลื่อน เหมื่อน บล็อกของคุณทำยังไงครับ

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

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

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