Cara Membuat Kotak Spoiler Buka Tutup diPostingan V.2

Cara Membuat Kotak Spoiler dipostingan dengan buka tutupV.2 - Sebelumnya saya mengulas Cara Membuat Kotak Spoiler diposting dengan buka tutup, kali ini pun masih pada cara yang sama yaitu mengulas kembali mengenai buka tutup pada kotak spoiler,Tentunya anda masih ingat fungsi spoiller, baiklah saya akan sedikit mengingatkan, spoiller berfungsi untuk mengefektifkan browser dalam loading halaman, apabila pada tombol spoiler belum diklik (show/buka) maka browse belum membuka isi dari spoiler tersebut.

Naah, Pada kota spoiller ini memiliki perbedaan, kotak spoiler sebelumnya sangatlah sederhana, namun pada kotak spoiler kali ini sedikit dimodifikasi dan tampilan lebih elegan, kotak spoiller yang akan saya share berikut ini anda dapat merubah background pada tombol spoiller tersebut. Demonya Anda bisa klik kotak spoiler di bawah ini :

Live Demo

Silahkan anda sisipkan text, image atau script pada halaman spoiller yang akan ada tampilkan atau sembunyikan

Apabila Anda tertarik, di bawah ini cara serta panduannya untuk menerapkan di Blog kesayangan Anda.

Berikut langkah-langkah penerapannya :

1. Login keakun Blogger 
2. Selanjutnya klik Entri baru
3. kemudian klik Compose HTML
4. Salin kode dibawah ini dan tempatkan di HTML

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#5973FC; color:#fff; border:1px solid #000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div><div style="padding:5px; text-align:justify;"><div style="display: none;">Silahkan anda sisipkan text, image atau script pada halaman spoiller yang akan ada tampilkan atau sembunyikan</div></div></div !akhir spoiler>

5. Klik Publikasikan

Penjelasan :
Code  <div style="text-align: center;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.
Code background-color:#5973FC adalah warna background tombol show hide Spoiller.
Code color:#fff; warna pada tulisan tombol show hide Spoiller
Code value = 'Hidden'; } value = 'Show'; } silahkan anda ganti sesuai keinginan anda sebagai contoh "show-hide" diganti dengan "Buka-Tutup"
Code width: 100px; merupakan nilai ukuran lebar dari tombol show-hide

Demikian Cara Membuat Kotak Spoiler diposting dengan buka tutup V.2, semoga bermanfaat!

Bagikan Artikel ini