Cara Buat Spoiler Buku Tutup/Open Close Menarik Di Blog

Cara Buat Spoiler Buku Tutup/Open Close Menarik Di Blog - Bagi anda yang sering posting artikel yang menyajikan kode-kode HTML, Javascript, dll saya yakin sering menggunakan kotak-kotak spoiler untuk menamlikannya agar terlihat lebih menarik. Memang jika menggunakan kotak-kotak seperti itu membuat artikel yang kita posting lebih elegan. Sekarang banyak jenis-jenis kotak spoiler tersebut 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

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

<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>

Berikut hasilnya :

(TULIS DESKRIPSI DISINI)

dikutip dari dikaeuphrosyne.blogspot.com