Hidden Sidebar & Widget

Nah waktu itu saya udah mostingin expand/collapse. Iyah bener yang ini Expand/Collapse. Waktu itu kan aku menerangkannya versi Annie. Nah sekarang aku keliling-keliling, eh dapet deh yang serupa dengan teknik itu loh. Bagaimana nih...tertarik nggak nih !!! Kalau tertarik siap-siap deh, yuk kita mule (halah Mule). Oke sekarang coba kalian masuk ke Layout ---> Edit/HTML ---> centang bagian ---> Expand Widget Templates.
Sip...kalau udah cari deh kode berikut :

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

Yang berwarna biru adalah kode awal kawan, dan yang merah adalah akhir dari kode kawan. Gimana? udah ketemu blon, gunakan dengan menekan "Ctrl + F" pasti ketemu deh :D Setelah itu coba kawan perhatikan pada script yang tulisannya : <h2 class='title'><data:title/></h2>. Buat apa diperhatikan ??? Yaaa discript itulah kita akan menambahkan kode-kodenya :p Ganti dengan kode 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;">[Open]</a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

Kalau sudah, tarik napas dahulu...huuuffff...ah. Setelah itu kawan harus meletakan script berikut ini :

<script type='text/javascript'> /* <![CDATA[ */ document.write('</div>'); /* ]]> */ </script>
Letakan script diatas tersebut, sebelum kode : </b:includable>
Kalau sudah tinggal disave deh. Contoh di blog aku tuh yang bertitlekan teman's dan friend's yang disebelah kanan. Kalo gak berhasil coba terus... ;) perhatikan dibagian ini :
<b:widget id='HTML8' locked='false' title='teman's' type='HTML'>
Udah ah capek. Happy blogging :) Ada yg lupa...sumbernya Gampang kok