Cara Membuat Berbagai Macam Tombol Spoiler

Cara Membuat Berbagai Macam Tombol Spoiler Di Blog - Nah malam malam mau update nih, coz gak ada kerjaan dari tadi cuma chat di SM KR. saya mau share tentang Tombol Spoiler, ada yang tau gak apa itu Tombol Spoiler ? Tombol spoiler adalah tombol yang mampu menyembunyikan sesuatu baik itu berupa tulisan,widget ataupun gambar. Tombol spoiler juga bisa memperingan loading blog anda. Cekidot Cara Membuat Berbagai Macam Tombol Spoiler di Blog :

Contoh Spoiler Pertama :

Kode untuk membuatnya adalah seperti ini :

<div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="font-weight: bold; color: rgb(0, 102, 0);">Letakkan Kode yang Ingin disembunyikan disini</span></div></div>

Contoh Spoiler ke 2

Dan Kode untuk membuatnya adalah seperti berikut :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 3

Kode untuk membuatnya :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 4 :

Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

Contoh Spoiler ke 5 :

Judul

Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>