Cara Membuat Spoiler Show Hide di Blog

Dengan spoiler kita bisa menyembunyikan elemen seperti, link, teks, gambar atau video.

Cara Membuat Spoiler Show Hide di Blog
Cara Membuat Spoiler Show Hide di Blog

Cara Membuat Spoiler Show Hide di Blog – Apa itu Spoiler? Spoiler adalah sebuah fitur yang berfungsi menyembunyikan suatu elemen menggunakan kode CSS.

Dengan spoiler kita bisa menyembunyikan elemen seperti, link, teks, gambar atau video.

Cara kerja spoiler adalah buka-tutup atau show-hide, artinya sebuah elemen yang tersembunyi akan muncul saat kita menekan sebuah tombol.

Begitupun sebaliknya, akan menutup jika kemudian tombol tersebut ditekan kembali.

Cara Membuat Spoiler

Tujuan spoiler tentunya untuk menghemat tempat atau space di dalam halaman tertentu.

Selain itu bermanfaat juga untuk mengurangi beban loading halaman sebuah situs/ blog apabila spoiler di gunakan untuk menyembunyikan file foto, gambar atau video yang tentunya menguras bandwidth data internet.

Spoiler juga bisa di terapkan di Blogger dan WordPress. Caranya mudah, cukup dengan menambahkan Kode Script pada halaman atau page yang ingin di pasang spoiler.

Berikut cara-cara memasang spoiler berdasarkan fitur yang ingin disembunyikan di Blogger:

Copy dan Paste kode dibawah ini di postingan atau widget html javascript blog Anda:

Cara Menyembunyikan teks atau tulisan dipostingan Blog

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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="Show" /></div>
<div class="alt2" style="background: #fff; border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Cara Membuat Spoiler Show Hide di Blog</div>
</div>
</div>

Hasilnya bisa kamu lihat seperti di bawah ini:

Cara Membuat Spoiler Show Hide di Blog

<div style="margin: 5px;">
<div style="margin-bottom: 2px;"></div>
<div style="background: #fff; border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Cara Membuat Spoiler Show Hide di Blog</div>
</div>
</div>

Cara menyembunyikan Gambar atau Foto di postingan Blog:

<div style=”margin: 5px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”><input style=”margin: 0px; padding: 0px; width: 60px; font-size: 10px;” 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’; }” type=”button” value=”Show” /></div>
<div class=”alt2″ style=”border: 0px inset; margin: 0px; padding: 6px; background: #000;”>
<div style=”display: none;”><img class=”aligncenter” src=”http://i880.photobucket.com/albums/ac8/tikulerz/endolita/1480720_776285395715892_558085184455548481_n_zps940e7986.jpg~originalalt=”endolita cyiiiiiint…” width=”440″ height=”600″ /></div>
</div>
</div>

hasilnya:

endolita cyiiiiiint...

Cara Menyembunyikan Video dipostingan Blog:

<div style=”margin: 5px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”>
<b>Contoh:</b>&nbsp;<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=”Show” /></div>
<div class=”alt2″ style=”background: #000; border: 0px inset; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
<iframe allowfullscreen=”” frameborder=”0″ height=”260″ src=”//www.youtube.com/embed/RjoQgqOjiYI?feature=player_detailpage” width=”440″></iframe>
</div>
</div>

hasilnya:

Contoh:

CATATAN: Untuk dapat menampilkan kode spoiler di postingan, Anda harus posting kode tsb di mode HTML (bukan di mode Compose)

Demikian trik sederhana Cara Membuat Spoiler Show Hide di Blog, Semoga artikelnya bermanfaat.
Terima Kasih

Respon (1)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *