Cara Membuat Tombol Spoiler

Sedikit penjelasan mengenai spoiler yaitu tombol yang yang dibentuk dari perpaduan kode HTML dan JavaScript yang berfungsi untuk menampilkan dan menyembunyikan suatu content baik itu berupa image ataupun text, dengan tujuan menghemat ruang atau spasi. Sangat mendukung apabila digunakan pada postingan yang sangat panjang. Contoh tombol spoiler dapat anda lihat di bawah ini.

Berikut ini adalah kode untuk membuat tombol spoiler seperti di atas.

<div id="spoiler"><div><input value="Show" style="margin: 5px; padding: 3px; font-size: 11px; font-weight:bold;" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" type="button"><div id="show" style="margin: 5px; padding: 2px; display: none; width: 98%;">LETAKKAN CONTENT ANDA DI SINI</div><div id="hide"></div></div></div>

Keterangan:
• Silakan anda ganti kode yang berwarna merah dengan isi content anda.

Udah sekian dulu tutorialnya. Semoga sampai tujuan...hehe...

3 Comments:

Rizkyzone said... on May 9, 2010 at 12:24 AM: mantab sob juga dah aq terapkan d beberapa bagian sidebar blog q
Masda said... on May 9, 2010 at 3:43 AM: Iya sob, bwt ngumpetin mbaknya khan? hehe,,, :p
ariefborneo said... on June 14, 2010 at 5:46 PM: sip info na gan..thnxs

Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.

Komentar yang bernada SPAM atau SARA akan kami hapus.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))