Peek-a-Boo style pada Widget

Pernah mencoba? membayangkan? Sidebar blog kita berisi element namun element tersebut adalah element yang ber-gayakan Peek-a-Boo. Yakni element yang bisa kita expand dan collapse jika kita inginkan. Bagaimanakah melakukan hack itu?

Waw! ternyata tidak sulit, kita hanya perlu untuk mengklik salah satu tombol ini:

<a target="_blank" title="HTML" href="http://blogywalkie.com/tag/html/">HTML</a> / JavaScript Here <b:includable id=’main’> <h2 class=’title’> <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;">'); /* ]]> */ </script> <data:title/> <script type=’text/javascript’> /* <![CDATA[ */ document.write('<\/a>'); /* ]]> */ </script> </h2> <script type=’text/javascript’> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type=’text/javascript’> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name=’quickedit’/> </b:includable>  

HTML / JavaScript Here <b:includable id=’main’> <h2 class=’title’> <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;">[+/-]<\/a>’); /* ]]> */ </script> <data:title/> </h2> <script type=’text/javascript’> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type=’text/javascript’> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name=’quickedit’/> </b:includable>  

Lho! kok ada 2 tombol? ya kita pilih aja salah satunya. Jika kita pilih tombol pertama, yakni: Peek-a-Boo HTML (from Title), maka isi dari Widget tersebut akan ter-expand jika kita menekan Title (judul Widget) tersebut. Namun, jika kita pilih yang kedua, yakni Peek-a-Boo HTML ([+/-]), maka isi dari Widget kita akan ter-expand pun ter-collapse jika kita menekan tombol [+/-] tersebut.

Mudah bukan?

Technorati Tags: Blogger, Hack

Post Sejenis

• Membuat Label Cloud dengan Mudah
• Comment-Box ala WordPress. Instalasi Mudah dan Pasti di Blogger
• Membuat “Recent Post” di Blogger lebih dari 5 link-list
• Yahoo! Search Plugin untuk Blogger
• PinkStars: Template Pink untuk para Teens Cewek jaman sekarang
• Cara Hacker nge Hack WordPress
• Oh Dear God, ini membuatku mual tujuh turunan!
• 25 Lebih Blog Official Google
• 10 Template Blogger ala Magazine
• Mempercantik Blogger Part (3): Blogger Reactions