Membuat widget buka / tutup

Kali ini saya akan membahas cara membuat Widget Buka/Tutup atau spoiler pada widget (sidebar) bukan link atau lain sebagainya seprti pada gambar disamping.
langsung ja ya sob ikuti langkah - langkah ini:
1. Log In ke blog anda
2. pilih Design/rancangan
kemudian pilih widget yang akan anda berikan spoiler atau tombol Buka Tutup
lalu klik EDIT



Setelah terbuka, lihatlah pada address bar widget tersebut, di sanalah terdapat ID widget tersebut,

anda bisa lihat gambar berikut ini yang tanda html1 adalah ID dari judul widget atau sidebar anda

Setelah ID Widget ditemukan, klik cancel untuk kembali.
Kemudian buka halaman Edit HTML,Centang Expand Widget Template
(jangan lupa backup template dulu dengan klik Download Template)
Kemudian cari kode ID Widget yang baru anda dapatkan, sebagai contoh pada gambar di atas kan kode nya HTML1 jadi anda cari di edit html kode HTML1 seperti gambar di bawah ini

Setelah ID Widget ditemukan, lalu cari kode yang Dicetak Tebal berikut

<h2 class='title'><data:title/></h2>

Setelah ketemu, ganti kode yang dicatak tebal tersebut 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;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>


kemudian masukan kode berikut di atas kode </b:includable>

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

dan jika di gabung keseluruhannya akan menjadi seperti ini

<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
</b:includable>
</b:widget>
</b:section>
</div>

Selesai sudah jangan lupa disimpan ya

Posted in: Trik Mempercantik Blog