Cara Buat Tombol Spoiler

Mungkin anda sering melihat sebuah tombol pada Blog, Website, ataupun Forum-forum yangmana apabila kita klik maka akan tampil sebuah pesan/gambar yang tersembunyi. Nah, itu adalah Tombol Spoiler


Berikut ini adalah cara membuat Tombol Spoiler. Anda cukup mencopy paste kode dibawah ini dan paste di postingan anda.


<div style="text-align: center;"><div class="button-spoiler"><input 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Again'; }" type="button"></div><div class="spoiler"><div style="display: none;">
<div style="text-align: left; padding: 10px; border: 3px inset rgb(51, 51, 51); font-size: small;">


<ul><li>TEMPAT MEMASUKKAN GAMBAR/ ATAU TULISAN ANDA</li>
<li>KAMU JUGA BISA MEMASUKKAN JAVA SCRIPT</li>


<li>Klik button "Hide" untuk menghilangkan area ini</li></ul>
</div></div></div></div>

Untuk kata Show/Hide/Show Again anda dapat menggantinya sesuai dengan keinginan anda.

Semoga bermanfaat....

Categories

Widget by Scrapur