Cara Membuat Spoiler Untuk Widget Blog Tanpa Edit HTML

               Seiring dengan kemenangan Spanyol di Euro 2012 renovasi blog gue yang udah hampir selesai ini (tahap finishing), gue nggak bakal lupa kok sama kalian pembaca dan penikmat tutorial semua. Secara gue bikin tutorial dengan tanggung jawab dan anti-malpraktek haha. Iyalah (FYI : Semua tutorial di blog gue udah gue coba satu persatu). So kalian nggak perlu takut lagi, tinggal cara pemraktekkanya aja gimana. Kalo kalian gagal ya mungkin itu ada sedikit kesalahan teknis, dan bisa tanya jawab sama gue kok. Tinggal mention aja ke @fadhlizaky atau komentar aja gamapang kan ? Oke kalau begitu, kita back to the topic kali ini gue yang ganteng mau ngajarin cara bikin spoiler untuk widget blog atau cara bikin spoiler pada widget blog seperti yang ada di sidebar gue nooh :)


Langkah-langkah Pembuatan :

1. Seperti biasa, log in ke blogger > Tata Letak > Tambah Gadget > HTML/Java Script.
2. Isikan dengan javascript berikut, lalu klik Simpan.

<div><div style="margin-bottom: 3px;"><i><b><small>Tambahkan Teks Sebelum Spoiler Disini</small></b></i><input value="Teks Pada Spoiler" style="margin: 0px; padding: 0px; width: 100px; font-size: 10px;" 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;Hide&#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;Show&#39;; }" type="button" /></div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

Letakkan apapun disini

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

Keterangan :

• Ganti teks yang berwarna merah dengan judul spoiler
• Ganti teks yang berwarna biru dengan namanya spoiler contoh punya gue "Site Info"
• Ganti teks yang berwarna hijau dengan lebar spoiler
• Ganti yang berwarna kuning dengan gadget yang kalian mau masukkan ke dalam spoiler
• Jika gadgetnya banyak silahkan tambahkan </ br> pada akhir gadget (contoh : gadget pertama< /br>gadget kedua)

Thanks buat Blog yang ngajarin gue tutorial ini : http://ourreference.blogspot.com/2012/05/cara-membuat-spoiler-pada-widget.html

Salam Hangat,

Fadhli Abdurrahman Zaky