Sobat , kali ini saya akan berbagi tutorial tentang Cara Membuat Tombol Spoiler di Blog tanpa CSS. Yang mana tombol ini bisa bermanfaat dan dapat digunakan untuk menyembunyikan sebuah artikel yang berisi tulisan, gambar, script atau yang lainnya. Dan akan terlihat dan terbuka setelah Sobat menekan pada Tombol Buka Tutup tersebut.
Contoh penerapan :
Bagaimana tertarikah Sobat untuk mencobanya?
Ok caranya cukup mudah, simak tutorial saya berikut ini :
1. Pilih tempat yang akan Sobat pasang tombol spoiler, entah dipostingan atau widget dll
2. Kopikan kode dibawah ini
<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
TAMBAHKAN DENGAN TULISAN, GAMBAR ATAU SCRIPT SOBAT DISINI
</div></div></div>3. Jika sudah maka, lihat hasilnya. apabila berhasil maka tombol buka tutup akan terbuka.
Untuk mempercantik tampilan tombolnya, Sobat juga bisa menambahkan kode CSS dengan Class yang sama.
Demikian tutorial dari saya, semoga bermanfaat bagi kita semua !
Demikianlah Artikel Cara Membuat Tombol Spoiler di Blog
Sekian Artikel Cara Membuat Tombol Spoiler di Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Androkomp.net kali ini semoga bisa bermanfaat.
Anda sedang membaca artikel Cara Membuat Tombol Spoiler di Blog dan artikel ini url permalinknya adalah https://trajumas11.blogspot.com/2014/08/cara-membuat-tombol-spoiler-di-blog.html Semoga artikel ini bisa bermanfaat.
Tag : Info, Tips Blogger,