Cara Menyembunyikan Isi Widget

Menyembunyikan Isi Widget disini berarti yang akan tampak hanya judul dari widgetnya saja, dan akan terlihat isi widget apabila pengunjung mengklik tombol yang disediakan.

Jelasnya Anda bisa melihatnya di Widget sebelah kanan Blog ini yang berjudul OpenStatistik jika anda klik [Statistik] maka akan Muncul isi Widget tersebut. Nah....Ingin tahu caranya?

Ikuti petunjuk dibawah ini:

# Login ke Blogger.

# Klik Layout > Edit HTML > contreng 'Expand widget template'.

# Backup dahulu template anda.

# Cari widget yang ingin anda ubah, kodenya seperti ini :

* <b:widget id='Label1' locked='false' title='Title' type='Label'>; untuk widget jenis Label.

* <b:widget id='HTML1' locked='false' title='' type='HTML'>; untuk widget jenis HTML.

* <b:widget id='LinkList2' locked='false' title='Title' type='LinkList'>; untuk widget jenis Link list.

Misalnya kode yang ingin anda ubah widget jenis HTML, maka kodenya akan seperti ini :

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

Ganti kode yang berwarna abu - abu (<h2 class="title"><data:title></data:title></h2>), dengan kode di bawah 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;">[Buka]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

# Tulisan warna merah ([Buka]) dapat anda ganti dengan selera anda.

# Kemudian tambahkan kode di bawah ini sebelum kode warna biru (</b:includable>) :

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

* Jika sudah selesai tinggal di simpan dan preview.


Semoga bermanfaat!!!