banner
Mar 12, 2012
9 Views

Memasang Spoiler / tombol Show Hide di blog

Written by
banner

Kali ini Catatan si boy mencoba memaparkan bagaimana cara memasang spoiler / tombol show hide di blog khususnya di wordpress platform (untuk blogspot, si boy belum mencoba tetapi seperti bisa). Seperti kita jumpai ada paragraf tulisan atau gambar yang tidak terlihat di posting kita tetapi ketika kita klik / tekan suatu tombol tertentu maka paragraf atau gambar tersebut akan muncul. Contoh spoiler seperti terlihat di bawah ini:

Tempat untuk meletakkan tulisan atau gambar yang akan di sembunyikan

Setelah mengetahui apa itu spoiler, kita langsung saja menuju ke sepenggal kode dibawah ini yang nantinya kita letakkan di dalam postingan.

1
2
3
4
5
6
7
8
9
<div style="padding: 0 15px 5px 15px;">
<input type="button" value="Show" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" 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'; }">
</div>
 
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 5px 15px 5px 15px; padding: 5px 15px 5px 15px;">
<div style="display: none;">
Tempat untuk meletakkan tulisan atau gambar yang akan di sembunyikan
</div>
</div>
<div style="padding: 0 15px 5px 15px;">
<input type="button" value="Show" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" 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'; }">
</div>

<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 5px 15px 5px 15px; padding: 5px 15px 5px 15px;">
<div style="display: none;">
Tempat untuk meletakkan tulisan atau gambar yang akan di sembunyikan
</div>
</div>

Cara penggunaanya juga cukup mudah hanya perlukan beberapa langkah seperti panduan berikut:

1. Silahkan buka halaman untuk menulis artikel dan pastikan bahwa penulisan dalam mode HTML.
2. Selanjutnya silahkan copy kode di atas itu.
3. Paste kode tersebut ke halaman posting.
4. Ganti kalimat “Tempat untuk meletakkan tulisan atau gambar yang akan di sembunyikan” dengan isi yang kita kehendaki.

Itulah cara memasang spoiler / tombol hide show di blog kita. Semoga bermanfaat bagi kita.

Article Tags:
· · · · · ·
Article Categories:
Programming · Tips · Wordpress
banner
    https://mfaisal.com

    Seseorang yang selalu tertarik dengan Computer Programming, Photoshop, Web Design, Motivasi, Wordpress dan Internet. Silahkang lingkari saya di Google+ : Faisal dan Facebook. Atau follow juga di Twitter

    Comments to Memasang Spoiler / tombol Show Hide di blog

    • caranya pasang tombol hide, tapi didalam tombol ada tombol downlod gimana?

      mohon bantuanya

      kelana April 5, 2012 2:47 pm

    Leave a Reply

    Your email address will not be published. Required fields are marked *