Cara Mudah Membuat Spoiler Buka Tutup

Selamat Malam sahabat, malam ini saya bagikan trik yang sudah tak asing lagi bagi sanabat blogger yaitu spoiler buka tutup.
Jika sahabat belum tahu silahkan dibaca dan jangan lupa corat coret kotak komentarnya, Terima kasih :)

1. Spoiler buka/tutup biasa tanpa background dan border

GANTI DENGAN TULISAN ATAU SCRIPT DISINI




<div style="text-align: left;"> <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="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: #e6e6e6; border-radius: 2px; border: 2px solid #ccc; color: black; width: 100px;" type="button" value="Buka" /></div> <div style="padding: 5px; text-align: justify;"> <div style="display: none;"> GANTI DENGAN TULISAN ATAU SCRIPT DISINI</div> </div>

2. Spoiler buka/tutup dengan border tanpa background

GANTI DENGAN TULISAN ATAU SCRIPT DISINI

Kodenya:

<div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: left;"> <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: no; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;"> <div style="display: none;"> <span style="color: white; font-style: regular;"><span style="color: white; font-family: Verdana, sans-serif;">GANTI DENGAN TULISAN ATAU SCRIPT DISINI</span></span></div> </div> </div>

3. Spoiler buka/tutup dengan border dan warna background

GANTI DENGAN TULISAN ATAU SCRIPT DISINI

Kodenya:

<div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: left;"> <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: white; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;"> <div style="display: none;"> <span style="color: white; font-style: regular;"><span style="color: black; font-family: Verdana, sans-serif;">GANTI DENGAN TULISAN ATAU SCRIPT DISINI</span></span></div> </div> </div>

4.Spoiler dengan gambar sahabat setia di dalamnya

Kodenya:

<div style="margin: 5px 10px 10px;"> <div class="smallfont" style="margin-bottom: 2px;"> <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: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div> <div class="alt2" style="border: 2px inset; margin: 0px; padding: 6px; text-align: left;"> <div style="display: none;"> <img alt="Post spoiler" border="0" src="isi url gambar disini" /></div> </div> </div>

Semoga bermanfaat...