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.

 

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 membuat Spoiler untuk 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;">Isi teks atau tulisan sobat di sini</div>
</div>
</div>

hasilnya:

Cara Membuat Spoiler Show Hide di Blog

Cara membuat Spoiler untuk menyembunyikan Gambar atau Foto dipostingan 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~original" alt="endolita cyiiiiiint..." width="440" height="600" /></div>
</div>
</div>

hasilnya: 

Cara membuat Spoiler untuk 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.

Artikel Terkait

Cara Membuat Spoiler Show Hide di Blog

4/ 5

Oleh Bonita Benz