Top
Memasang Spoiler / tombol Show Hide di blog - Catatan Si Boy
fade
239
post-template-default,single,single-post,postid-239,single-format-standard,eltd-core-1.1.1,flow child-child-ver-1.0.0,flow-ver-1.3.7,,eltd-smooth-page-transitions,ajax,eltd-grid-1300,eltd-blog-installed,page-template-blog-standard,eltd-header-vertical,eltd-sticky-header-on-scroll-up,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default

Memasang Spoiler / tombol Show Hide di blog

Memasang Spoiler / tombol Show Hide di blog

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.

GD Star Rating
loading...
Memasang Spoiler / tombol Show Hide di blog, 5.0 out of 5 based on 1 rating
1 Comment
  • kelana

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

    mohon bantuanya

    April 5, 2012 at 2:47 pm

Post a Comment