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, oke 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 mempunyai 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 sanggup merubah background pada tombol spoiller tersebut. Demonya Anda sanggup klik kotak spoiler di bawah ini :
Live Demo
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. lalu klikCompose HTML
4. Salin arahan dibawah ini dan tempatkan di HTML
5. Klik Publikasikan
Penjelasan :
Code <div style="text-align: center;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.
Code background-color:#5973FC ialah warna background tombol show hide Spoiller.
Code color:#fff; warna pada goresan pena tombol show hide Spoiller
Code value = 'Hidden'; } value = 'Show'; } silahkan anda ganti sesuai harapan anda sebagai pola "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, biar bermanfaat! Sumber http://www.websiteedukasi.com/
Naah, Pada kota spoiller ini mempunyai 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 sanggup merubah background pada tombol spoiller tersebut. Demonya Anda sanggup klik kotak spoiler di bawah ini :
Live Demo
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. lalu klik
4. Salin arahan 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 ialah warna background tombol show hide Spoiller.
Code color:#fff; warna pada goresan pena tombol show hide Spoiller
Code value = 'Hidden'; } value = 'Show'; } silahkan anda ganti sesuai harapan anda sebagai pola "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, biar bermanfaat! Sumber http://www.websiteedukasi.com/
