Apabila terdapat error atau link download mati. Bisa hubungi admin ke Grup Facebook
» » Cara Membuat Tombol Spoiler di Blog

Cara Membuat Tombol Spoiler di Blog

Post by Arif Poetra Yunar at 12:56



Cara Membuat Tombol Spoiler di Blog

     Sambil nunggu mata ngantug, ane mau share neh Cara Membuat 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. and ada berbagai macam Tombol Spoiler yang di gunakan di Blog, langsung aja yah kita mulai Cara Membuat 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 :
Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work
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
Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work
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>


Nah tinggal Sobat copy-paste aja kode di atas, semoga semua Tombol spoiler ini bermanfaat.

Source : http://tanpa-isi.blogspot.com

Cara Membuat Tombol Spoiler di Blog


Share this to:
Anda sedang membaca artikel : Cara Membuat Tombol Spoiler di Blog dengan url http://arifpoetrayunar.blogspot.com/2011/07/cara-membuat-tombol-spoiler-di-blog.html

Artikel Terkait: Cara Membuat Tombol Spoiler di Blog

on 12:56
Kategori :

{ 0 komentar to : Cara Membuat Tombol Spoiler di Blog | Skip to Comment }


Posting Komentar

 
Back To Top