Membuat Show/Hidden Widget

Banyak sekali yang bertanya kepada saya bagaimana cara membuat widget di sidebar memiliki tombol untuk membuka dan menutup. Nah, pada keadaan default widget di sidebar akan tersembunyi. Widget akan terlihat begitu tombol di klik oleh pembaca. Banyak yang menggunakan teknik sama seperti spoiler, namun kali ini tanpa menghilangkan judul widget. Langsung saja bagi yang ingin mencobanya.

1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Cari kode widget yang akan di rubah. Jika Anda memberi judul pada widget Anda maka akan sangat mudah mencarinya. Misalnya saya memiliki widget dengan judul recent comment, maka saya tinggal ketikkan recent comment di fungsi pencari (ctrl+f)
Apapun caranya yang penting kode widget Anda ketemu :D

Contohnya kode widget recent comments saya

<b:widget id='HTML3' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Anda cukup mengganti yang berwarna merah dengan script berikut

<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:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

Nah, jika sudah tambahkan kode biru di bawah ini di atas </b:includable>

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

Nah, hasilnya menjadi seperti ini untuk widget recent comments saya:
<b:widget id='HTML3' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Selamat mencoba, semoga bermanfaat....