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.


Catat Ulasan

9 Comments:

Angga Pradipta berkata...
Teknik Buat Blog

thanks sob..

Ustaz Hj Othman Hamzah berkata...
Teknik Buat Blog

knp untuk sembunyikan freedjit tak boleh untuk aplikasi cara ini?

yahaya berkata...
Teknik Buat Blog

@Ustaz Hj Othman Hamzah
saya minta maaflambat menjawap soalan dari ustaz..ada masaalah komputer.Saya cuba dua cara untuk buat butang tutup ini..betul dgn feedjit tak boleh..mungkin masaalah javascript.Satu cara lagi boleh juga gunakan spoiler.

Seri Kandi Islam berkata...
Teknik Buat Blog

Salam.. ayat yg last skali tu,

"Seterusnya salin kod ini :
.................
dan letakkan sebelum kod :"

sebelum kod ap??? kurang jelas...

yahaya berkata...
Teknik Buat Blog

@Aku Dan Teksikod tu ada tapi tak nampak sebab jadi warna hitam..saya dah edit....

Ayik berkata...
Teknik Buat Blog

kalo buat spoiler, gimana caranya???

yahaya berkata...
Teknik Buat Blog

@Ayik
tgk pada cara buat butang show and hide

Jabriel berkata...
Teknik Buat Blog

thanks yah atas infonya..

Ikram berkata...
Teknik Buat Blog

boss.camna nak buat kita tekan title tu saja dah terbuka dan tertutup tanpa perlu tekan open - + tu ??