Show Hide Side Bar

pertama2 thanks buat http://www.cumie.net/ yang telah membuat postingan ini setelah mengutak ngatik html akhirnya saya menumukan code script dari widget ini. kegunanan widget ini tidak lain untuk membuat kerapian pada blog kita. Biasa kita kesulitan dalam nambah - nambah elemen widget, selain widget yang berukuran sempit, juga loading yang suka lama menjadi halangan tersendiri untuk menambah dan menghiasi sidebar / widgetnya. Nah, berikut salah satu tips untuk mempercantik widgetnya yang telah berjubel dan terlihat norak alias berlebih gambar, yaitu dengan show hide sidebar .

Berikut merupakan show hide sidebar widget blogspot untuk kode html [sama artinya anda menambah elemen widget anda dengan html / javascript/ text]. Tinggal klik aja spoiler dibawah berikut, syaratnya anda harus login dulu.

show hide sidebar widget dari judul alias header widget, jadi jika judul widgetnya di klik, maka muncul conten widgetnya.

klik yang ini

Isikan kode HTML / Javascript di sini <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>

Expand collapse widget dengan tanda [+/-] pada header widgetnya, untuk membuka isi widget, perlu klik pada tanda [+/-] nya.

klik yang ini

Isikan kode HTML / Javascript di sini <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>

setelah anda mengklik tombol diatas maka akan muncul gambar

pada lingkaran merah = select a blog atau pastikan alamat blog yang ingin anada pasangkan widget ini.....itu jika anda mempunyai lebih dari satu blog..

lingkaran hijau = title atau isikan judul sidebar yang anda inginkan

Lingkaran biru = edit content atau masukkan code html widget yang akan ditambahkan...misalnya shotmix atau apapun yang ingin di berikan efek show hide

nah mudahkan......

contohnya seperti sidebar yang saya gunakan tentunya. Selamat mencoba. kalo ada kesulitan silahkan poskan komentar anda....