Membuat Spoiler untuk Widget Asli Blogger

Selamat siang sobat blogger, 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:

<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="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(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;LIHAT&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashes white; color:Bisque;background-color:NONE; text-align: justify; padding:10px; ">

LETAKKAN WIDGET DISINI

</div></div></div></div></div>

 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 :

<div class='widget-content'>

4. Letakkan script widget spoiler diatas tadi (sebelum tulisan "LETAKKAN WIDGET DISINI") atau bagian widget yang telah di encode

<div class='widget-content'>

5. Kemudian geser lagi kebawah maka sobat akan menemukan kode  

</b:includable>

Kemudian letakkan kode  dibawah ini (setelah di encode) persis diatas kode pada poin 5 sebagai penutup widget.

</div></div></div></div></div>  

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.