Membuat Widget di Sidebar Buka/Tutup

Kebanyakan widget di sidebar kadang menjengkelkan, karena blog kita akan kelihatan panjang widget daripada postingan. Sobat dari hasil saya berjalan-jalan alias dalam bahasa jawanya tuh BLOG WALKING hehehe..., saya menemukan sebuah blog yang membahas tentang hal ini. Terimakasih buat sobat saya Easyblogtrick, dengan bahasannya saya dapat mempraktekkan dan menuliskan kembali.

Sobat dapat melihat contoh yang telah saya pergunakan pada widget daftar isi, labels, dan pengunjung. Bagaimana cara pembuatannya, ternyata setelah saya praktekkan sangatlah mudah.

Berikut ini tahapan membuat widget seakan dapat dibuka maupun ditutup :

1. Masuk kedalam Blog area sobat dengan menggunakan ID dan password sobat.

2. Klik Tab "LAYOUT/TATA LETAK" =>> "EDIT HTML"

3. Beri tanda pada kotak disamping tulisan "EXPAND WIDGET TEMPLATES", ingat lebih baik sobat selalu backup template sobat sebelum merubah sesuatu pada template sobat dengan menekan tulisan "Download Full Templates.

4. Cari kode widget yang akan sobat buka/tutup, disini misal saya gunakan daftar isi, cara pencariaan yang mudah dengan menekan tombol Ctrl+F kemudian ketik apa yang sobat cari. Disini kode standar untuk daftar isi seperti berikut.

<b:widget id='HTML5' locked='false' title='DAFTAR ISI' 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 yang berwarna biru yang merupakan kode awal dari widget daftar isi dan kode yang berwarna merah yang merupakan akhir kode widget
5. Ganti kode yang berwarna kuning dan berkedip dengan kode seperti ini :

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

Ganti kode/tulisan berwarna biru dengan kreasi sobat (bisa dengan kata Buka, Open, dsb)

6. Copy kode berikut

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

Kemudian letakkan kode tersebut diatas kode

</b:includable>

7. Langkah pembuatan telah selesai, kemudian simpan/save Template sobat.

Selamat berkreasi, dan semoga berhasil.