การแสดงป้ายกำกับแบบย่อขยาย : +/- (hide/show, expand/collapse) Labels

เขียนเป็นหัวข้อไม่ถูกเหมือนกันว่าจะเรียกว่าอะไรดีก็เลยเรียกว่า "การแสดงป้ายกำกับแบบย่อขยาย" สามารถคลิ๊กดูได้ที่ตำแหน่งด้านบน "โฆษณาโดย Google" น่าจะเป็นอีกหนึ่งลูกเล่นที่ทำให้บล็อกเราดูน่าสนใจและสามารถใส่หมวดหมู่ของป้ายกำกับได้มากกว่าเดิมโดยไม่เปลืองเนื้อที่หน้าบล็อก ดูตัวอย่างจากรูปด้านล่าง ซ่อนป้ายกำกับแสดงทางซ้ายมือ และขยายป้ายกำกับแสดงทางขวามือ

ขั้นตอนการสร้างมีดังนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML ไม่ต้องเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> NOT check the "Expand Widget Templates" check box)

ขั้นตอนที่ 2 ค้นหาคำว่า

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:widget id='Label1' locked='false' title='ป้ายกำกับ' type='Label'>

อาจจะแตกต่างจากนี้นิดหน่อยในแต่ละบล็อก หรืออาจจะลองค้นหาแค่ <b:widget id='Label1' locked='false' ก็ได้ บางครั้งคำว่า Lebel1 อาจจะเป็น Level2 หรือ 3 เพราะแต่ละบล็อกจะสร้างไม่เหมือนกัน แต่ให้เริ่มที่ Lebel1 ซึ่งน่าจะมีแค่ตัวเดียวเป็นส่วนใหญ่ บางบล็อกอาจจะมีมากน้อยแตกต่างกัน ให้ดูว่า Lebel ที่เราต้องการทำงานคือ Lebel ที่เท่าไร

ขั้นตอนที่ 3 ให้ทำการคัดลอกโค๊ดด้านล่างนี้แทนที่ และให้แก้คำว่า "Your Lebel Name" เป็นชื่อป้ายกำกับ(Lebel) ที่เราต้องการ

<b:widget id='Label2' locked='false' title='Your Labels Name' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<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>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

ขั้นตอนที่ 4 ทำการบันทึกแม่แบบ เท่านี้เป็นอันเสร็จพิธีการ

อย่าลืมทำการบันทึกแม่แบบก่อนด้วยน๊ะครับ