STATUS UPDATED!
FEEL FREE TO ASK~
Tutorial Blog ^_^: TUTORIAL: BUTANG BUKA DAN TUTUP WIDGET

Sekiranya anda berminat untuk membaca artikel Islam, info semasa, kisah nabi, kisah pengajaran dan lain-lain, bolehlah pergi ke Khaleefah Allah ^_^ Followlah blog ini dan blog itu sekiranya berbaloi untuk difollow. Sebarang ulasan adalah amat amat amat amat diharapkan.
Any Requests or Questions?

Jom, tukar link~

TUTORIAL: BUTANG BUKA DAN TUTUP WIDGET

00011432H
Tips buat kali ini adalah cara bagaimana menyembunyikan widget pada sidebar yang mana widget ini boleh dibuka dan ditutup dengan hanya klik pada butang tajuk widget pada sidebar. 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.

Design > edit HTML > tandakan pada Expand Template Widget

-Untuk contoh ini, saya pilih widget Link List untuk disembunyikan
Cara lebih mudah gunakan Crtl +F untuk mencarinya, taipkan title='Link List'

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.

0 comments:

Berkatalah dengan akal dan jiwa, kerana itu anugerah Pencipta dan ternyata natijahnya akan lebih bahagia. ^_^

Post a Comment

 
Copyright © 2009-2012 Tutorial Blog ^_^: TUTORIAL: BUTANG BUKA DAN TUTUP WIDGET
Design by a.a.ghariib