Membuat Hidden Sidebar & Widget

Apa itu hidden Sidebar & Widget? Yang jelas, trik kali ini adalah bagaimana membuat sidebar bisa disembunyikan dan dimunculkan.Trikini berlaku tidak hanya pada sidebar saja, tetapi bisa juga diterapkan pada footer. Klo masih bingung, lihat saja di blog ini. Ada tulisan [+/-] ato [Open], coba deh diklik. Pada keadaan tertutup, widget tersebut akan muncul secara keseluruhan. Sedangkan apabila dalam keadaan terbuka, maka widget akan disembunyikan lagi.

Keuntungan menggunakan trik ini adalah :
- Bisa lebih menghemat tempat, blog terlihat rapi.
- Pada saat mencoba, loading blog menjadi lebih cepat.

Apapun itu, klo Anda tertarik, yuk kita coba tips trik ini bersama... GAMPANG KOK!!!
== Sebagai contoh kasus, trik ini dipraktekkan pada sidebar 'Recent Post' di blog saya==

Menuju pada bagian 'edit HTML'

Pertama dan yang paling penting, download dulu template Anda. Sehingga jika terjadi kesalahan, bisa dikembalikan seperti semula.

Centang pada 'expand template widget'

Cari widget yang telah Anda tentukan. Sebagai contoh, saya mau pake trik ini pada widget di sidebar saya yang bernama 'Recent Post', maka saya mencari kode seperti ini :

title='Recent Post'

Cara yang paling mudah dengan Ctrl+F, maka akan muncul kotak pencarian, lalu ketik

title='nama widget Anda'

Kemudian enter.

Maka muncul kode-kode, yang perlu diperhatikan hanya kode untuk widget Anda. Contoh :

<b:widget id='HTML2' locked='false' title='Recent Post' 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>

Perhatikan, kode berwarna biru adalah awal kode Anda, dan yang berwarna merah adalah akhir kode widget Anda.

Lalu kode ini :

<h2 class='title'><data:title/></h2>

GANTI dengan kode :

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

Tidak perlu bingung dengan kodenya, tinggal copas aza. Tulisan berwarna merah bisa Anda ganti.

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

Paste kode tersebut di ATAS ato Sebelum kode :
</b:includable>

Klo udah, tinggal Save dan lihat hasilnya. Selamat mencoba.