Membuat Show-Hide/ Expand-Collapse Label

Kali ini saya akan menindak lanjuti apa yang disampaikan mas chantra dalam membagikan postingan yang berjudul "Membuat Show-Hide/ Expand-Collapse Label". Maksud dari judul tersebut adalah memodifikasi tampilan label yang dapat dibuka dan ditutup dengan mengklik tombol +/-. Bagi anda yang ingin memodifikasi element label/ kategori kedalam bentuk Show - Hide/ Expand - Collapse bisa mengikuti tutorialnya dibawah ini:

1. Masuk akun blogger
2. Klik edit HTML (jangan lupa template di backup)
3. Cari kode <b:widget id='Label2' locked='false' title='Labels' type='Label'/>
4. Ganti kode tersebut dengan kode dibawah ini

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'><br /><b:includable id='main'><br /><script type='text/javascript'><br />//<![CDATA[<br />if(typeof(rnd) == 'undefined') var rnd = '';<br />rnd = Math.floor(Math.random()*1000);<br />rnd = 'id-' + rnd;<br />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;">');<br />//]]><br /></script>[+/-]<br /><script type='text/javascript'><br />//<![CDATA[<br />document.write('</a>');<br />//]]><br /></script><br /><b:if cond='data:title'><br /><h2><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><script type='text/javascript'><br />//<![CDATA[<br />document.write('<div id="' + rnd + '" style="display:none;">');<br />//]]><br /></script><br /><br /><ul><br /><b:loop values='data:labels' var='label'><br /><li><br /><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/><br /><b:else/><br /><a expr:href='data:label.url'><data:label.name/></a><br /></b:if><br /></li><br /></b:loop><br /></ul><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />document.write('</div>');<br />//]]><br /></script><br /><b:include name='quickedit'/><br /></div><br /></b:includable><br /></b:widget>

5. Klik Save Templates (or Confirm and save) dan re-fresh blog anda

Selamat mencoba dan sukses selalu

Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

Bagikan