Buka Tutup Untuk Widget Pada Blog

Cara membuat Tombol Buka Tutup Untuk Widget Pada Blog Tips kali ini adalah cara bagaimana menyembunyikan widget pada side bar. Maksudnya ialah widget ini boleh dibuka dan ditutup dengan hanya klik pada tombol pada widget pada sidebar dan boleh juga pada footer.
Kebaikan dengan menggunakan cara ini sidebar nampak lebih tersusun rapi dan juga loading pun lebih cepat kerana disembunyikan terutama widget yang menampung gambar.

Sekarang kita ikuti langkah langkah berikut: Sebelum membuatnya 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: bisa juga melihat contoh ini
Untuk contoh dibawah ini, adalah widget pengunjung untuk disembunyikan Cara lebih mudah gunakan Crtl +F untuk mencari kata pengunjung, Kemudian enter. Kemudian muncul kode 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 kode 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 kode ini adalah berwarna putih:

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

dan letakkan sebelum kode :
</b:includable>
Kemudian tinjau terlebih dahulu dan seterusnya save template.