Cara Membuat Kotak Spoiler Buka Tutup di Postingan Blog

Sekarang banyak jenis-jenis kotak spoiler yang dibuat semenarik mungkin, sehingga pengunjung blog anda akan tidak cepat bosan jika membaca dan mempraktekan artikel-artikel yang anda posting. Artikel saya kali ini tentang Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup dan akan langusng saya jelaskan cara memasang nya di postingan dan di menu gadget dengan design yang polos-polos saja yang penting Seo Friendly.

• 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" /> </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 ;

Code; <div style="margin-top: 5px; text-align: left;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.

Code; Tulisan  Tutup  Buka  Buka  yang berwarna merah, silakan sobat ganti debgan sesuka sobat.

Code; width: 60px ; Yang berwarna merah tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.

Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah sobat lah.

Ingat ya soob. sobat bisa merubah code di atas hanya yang saya paparkan aja.

Untuk pemasangan kotak buka tutup tersebut, itu terserah sobat. mau sobat gunakan untuk apa aja, bisa buat kotak tulisan, buat kotak image..Penempatan kotak buka tutup, sobat bisa lihat di sidebar dan footer blog saya. atau juga bisa di postingan seperti ini.

Selamat Mencoba  semoga sukses