Hidden Sidebar & Widget

Tips dan trik blog kali ini adalah bagaimana membuat hidden sidebar & widget. Apa itu hidden Sidebar & Widget? Yang jelas, trik kali ini adalah bagaimana membuat sidebar bisa disembunyikan dan dimunculkan. Trik ini berlaku tidak hanya pada sidebar saja, tetapi bisa juga diterapkan pada footer.

Klo masih bingung, lihat saja pada sidebar Ayas (Recent Post) dan ke-3 footer Ayas dibawah. 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. Tapi yang ini Ayas sendiri masih agak ragu, apakah karena koneksi memang lagi 'bener', ato memang karena penggunaan trik ini.

Apapun itu, klo Sodara tertarik, yuk kita coba tips trik ini bersama... GAMPANG KOK!!!


== Sebagai contoh kasus, trik ini dipraktekkan pada sidebar 'Recent Post' di blog Ayas==

Menuju pada bagian 'edit HTML'

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

Centang pada 'expand template widget'

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

title='Recent Post'

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

title='nama widget sodara'

Kemudian enter.

Maka muncul kode2, yang perlu diperhatikan hanya kode untuk widget Sodara. 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 sodara, dan yang berwarna Merah adalah Akhir kode widget Sodara.

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 Sodara 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 simpen, trus lihat deh hasilnya..gimana? Berhasilkan? Klo belum bisa, coba lagi lebih teliti. Klo dah nyerah, silahkan tanya Ayas aja..Gak pa2 kok..

Selamat menikmati trik tips nya, semoga bermanfaat.. GAMPANG KOK!!!