Cara Membuat Kotak Spoiler Buka Tutup di Postingan Blog

Pertama, pada menu pos, klik "Entri Baru", kemudian disana ada dua tombol yaitu Compose dan HTML, anda pilih yang HTML, lihat gambar di bawah :

 

Kemudian copas kode di bawah ini pada halaman postingan anda, ini juga merupakan hasil jadinya nanti seperti di bawah ini :

<!---Start code show hide by;"dikaeuphrosyne.blogspot.com"---> <div style="margin-bottom: 2px;" > <div style="margin-top: 5px; text-align: center;" > <input 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 = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> lt/div> <div style="background-color: #cccccc; border-bottom: 1px solid #ff0000; border-left: 4px solid #ff0000; border-right: 1px solid #ff0000; border-top: 1px solid #ff0000; margin: 0px; padding: 6px;" > <div style="display: none;" > <span style="color: black; font-style: italic;" > (TULIS DESKRIPSI DISINI) </span></div> </div> </div> <!---End code show hide by;"dikaeuphrosyne.blogspot.com"--->

Keterangan : #cccccc; ini merupakan warna background nya, silahkan di ubah sesuai selera anda. (TULIS DESKRIPSI DISINI) Silahkan tulis deskripsi yang ingin anda buat dalam kotak spoiler buka tutup ini, jika ingin menampilkan gambar silahkan copas url gambarnya, jika ingin menampilkan kode HTML, dll silahkan di copas disini, biasanya saya kalau ingin menampilkan kode HTML di kotak spoiler ini saya merubah kode "<" menjadi "<" (tanpa tanda kutip) dan kode ">" menjadi ">". Jika sobat blogger tahu cara yang lebih sederhana, silahkan share di kolom komentar :) hehe..

Oleh: Dika Euphrosyne

Posted in: Blog,Tutorial