Cara membuat Spoiler pada Widget

Selamat siang sobat Smart, kebetulan tadi pagi saya lihat space blog saya ini sudah terlalu penuh jadi terlihat ribet, sementara beberapa widget lain masih saya perlukan. Gimana nih caranya...? *mikir*... Ting!!! akhirnya dapat ide juga, kenapa ngga saya coba saja pake spoiler biar menghemat tempat. Apa spoiler itu? Spoiler adalah widget sistem buka tutup yang jika kita klik tabnya maka akan muncul widget yang kita sembunyikan tersebut, -kira-kira begitu-. Tapi yang saya perlukan ini widget asli bawaan blogger, bisa ga ya? ternyata bisa dan caranya mudah sekali. Langsung saja yuk kita garap.. hehe... 

Widget ini sebetulnya biasa dipakai di sidebar, tapi bisa juga diletakkan di template dengan catatan di-encode dulu, sobat bisa lakukan disini. Scriptnya adalah berikut ini:

LIHAT" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background:#eae6e6; color:#000000; border:1px dashes grey;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'LIHAT'; }" type="button" />

LETAKKAN WIDGET DISINI

 Kata yang diberi warna sepertinya ga perlu saya jelaskan lagi, sobat pasti sudah mengerti.

Script diatas bisa langsung sobat gunakan di sidebar dengan menambahkan widget HTML/Javascript (caranya pasti sudah tahu). Dan untuk menggunakan spoiler ini pada widget asli blogger seperti Link List dan Blog Archive (Lihat Sidebar blog ini) sobat harus menuju ke tab edit HTML, caranya mudah yaitu seperti ini :


1. Setelah berada pada edit template HTML, jangan lupa expand widget template untuk memback up template current euntuk menghindari kesalahan.
2. Pastikan sobat sudah memasang widget Link List atau Blog Archive pada sidebar
3. Gunakan F3 atau Ctrl + F kemudian cari kode

b:widget id='LinkList1' 

kemudian geser kebawah sobat akan menemukan kode :
4. Letakkan script widget spoiler diatas tadi (sebelum tulisan "LETAKKAN WIDGET DISINI") atau bagian widget yang telah di encode
5. Kemudian geser lagi kebawah maka sobat akan menemukan kode
Kemudian letakkan kode  dibawah ini (setelah di encode) persis diatas kode pada poin 5 sebagai penutup widget.

  6. Save template dan lihat hasilnya.

Selesai sampai disitu dan sekarang sobat bisa menghemat space blog sobat dengan menggunakan spoiler. Mohon maaf jika kurang jelas, mari berbagi disini, semoga bermanfaat ya. Happy Blogging Sobat Smart !