Ruang Belajar Anak Bangsa: Membuat widget buka / tutup (spoiler)

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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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'>

<b:if cond='data:title != ""'>
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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

Anda Sudah Membaca Membuat widget buka / tutup (spoiler) Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan share Facebook like diatas/sharing tool. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku. (MENCURI adalah pekerjaan PENGECUT ! © room-tutorial.blogspot.com)