Cara Membuat Tombol Spoiler Blog

Pasti anda sudah tau apa itu tombol spoiler, Tombol Spoiler berfungsi untuk menghemat ruang pada sidebar blog anda dengan cara meneyembunyikan konten yang ingin ditampilkan, namun bila tombol spoiler di klik maka konten akan terbuka, menarik bukan sebagai contohnya anda bisa lihat dibawah ini, yang saya simpan iyalah berupa foto.

Lihat Demonya Sobat :

Klik Show untuk melihat

Adapun kodenya adalah sebagai berikut :


<div><div style="margin-bottom: 2px;"><b><small>Klik Show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

[LETAKKAN FOTO/KODE JAVASCRIPT ANDA DI SINI]

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

Pada Kode diatas anda bisa melakukan kustom dengan mengganti kalimat yang berwarna BIRU dan MERAH sesuai keinginan anda. Sedangkan kalimat yang berwarna HIJAU silahhkan anda hapus kemudian gantilah dengan Isi postingan maupun kode script widget anda, jumlah widget maupun image silahkan disesuaikan kebutuhan tidak ada batasannya.