Cara membuat butang buka dan tutup widget pada blog

Tips buat kali ini adalah cara bagaimana menyembunyikan widget pada side bar. Maksud saya disini ialah widget ini boleh dibuka dan ditutup dengan hanya klik pada butang tajuk widget pada sidebar dan boleh juga pada footer.Kebaikan dengan menggunakan cara ini sidebar nampak lebih tersusun rapi dan juga loading pun lebih laju kerana disembunyikan terutama widget yang mengandungi imej.

Kalau ingin membuatnya ikuti langkah seterusnya:
Sebelum membuatnya adalah disarankan backup template terlebih dahulu supaya dapat mengembalikan semula kepada yang asal jika ada kesalahan.
Pada Design--pilih edit HTML--dan tandakan pada Expand Template Widget

Kemudian cari widget yang hendak disembunyikan:
(boleh juga rujuk artikel sebelum ini)
-Untuk contoh ini, saya pilih widget Pelawat untuk disembunyikan
Cara lebih mudah gunakan Crtl +F untuk mencarinya,taipkan

title='Pelawat'

Kemudian enter.

Kemudian muncul kod seperti dibawah:

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

Gantikan kod ini :

<h2 class='title'><data:title/></h2> (warna merah)

Dengan kod dibawah :

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

Tulisan berwarna merah boleh diganti mengikut kesesuaian.Kod color untuk font juga boleh ditukar mengikut keperluan.Pada kod ini adalah berwarna puteh:

Seterusnya salin kod ini :

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

dan letakkan sebelum kod :

</b:includable>

Kemudian preview terlebih dahulu dan seterusnya save template.