Cara Membuat Spoiler Buka Tutup Gambar Pada Postingan Blog

Cara Membuat Tombol Spoiler Buka Tutup Gambar Pada Postingan Blog - Assalamualaikum.wr.wb, pada postingan kali ini kak Andy akan membagikan tutorial tentang bagaimana cara membuat tombol spoiler buka tutup gambar pada postingan blog.

Sobat yang suka ikut forum (seperti kaskus, indowebster, dan lainnya) pasti sudah tahu apa itu spoiler. Spoiler pasti sering digunakan, bahkan dianjurkan untuk memuat posting gambar dan video, terutama yang BWK (BandWith Killer / Gambar ukuran besar). Bagi Sobat yang belum tahu, berikut ini definisi dan kegunaan spoiler.

Spoiler adalah posting konten bisa berupa (teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca meng-klik tombol spoiler (buka/tutup) atau Show-Hide . Pembaca juga bisa menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca.

Untuk bisa membuat spoiler pada posting blog, harus digunakan kode khusus, yang cukup panjang. Namun walaupun begitu, kode ini tidak akan memberatkan blog sobat, bahkan mempercepat proses loading. Berikut ini adalah langkah-langkah yang bisa sobat tempuh kalau ingin membuat spoiler pada posting blog.

Ok, langsung saja kita mulai tutorialnya:

Untuk bisa menerapkan kode buka/tutup spoiler di blog ini sobat mesti menggunakan mode HTML pada saat menulis posting. Caranya; Login ke Blogger > New Post atau Entri Baru > Pilih mode HTML, kemudian terapkan kode berikut ini untuk membuat spoiler (buka spoiler di bawah ini).

Contoh Spoiler Pertama :

Letakkan Kode yang Dsembunyikan Disini

Dan Kode untuk membuatnya adalah seperti berikut :

<div id="spoiler"><div><input 
style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 
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 = 'TUTUP'; } else { 
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display
= 'none'; 
this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display
= ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT"
/></div><div id="show" style="border: 1px solid white; 
display: none; margin: 5px; padding: 2px; width: 98%;"><p 
style="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 2

LETAKKAN KODENYA DISINI

Kode untuk membuatnya :

<div id="spoiler"><div><input 
style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 
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 = 'TUTUP';
} else { 
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display
= 'none'; 
this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display
= ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="BUKA"
/></div><div id="show" style="border: 1px solid white; 
display: none; margin: 5px; padding: 2px; width: 98%;"><div 
style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; 
border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p 
style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 3 

LETAKKAN KODENYA DISINI

Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;"
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 = 'Close';
} else { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

Contoh Spoiler ke 4 :

Judul:

LETAKKAN KODE SOBAT DISINI

Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul: </span></i><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="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>

Jika sobat ingin spoiler tanpa  tombol atau hanya teks aja gunakan kode ini :

 <a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Buka]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Tutup]</a><br /> LETAKKAN KODE SOBAT DISINI </span>

 Ini contohnya :

[Buka][Tutup]
DAFTAR BLOG DAN WEBSITE YANG ADMIN KELOLA:
http://kakandyberbagi.blogspot.co.id
http://kursusbelajaringgrisonlinegratis.blogspot.co.id
http://kiospulsaku.com

Untung Rugi / Kelebihan Kekurangan Spoiler di Blog 

Seperti yang telah disebutkan diatas, keuntungan memasang spoiler di blog adalah

1. Menghemat space (tinggi) posting
2. Mempercepat loading halaman blog, dan 
3. Menghemat kuota pembaca.
4. Bisa untuk menyembunyikan keyword tertentu untuk optimalisasi posting (tidak dianjurkan)
5. dan lainnya (bisa sobat tambahkan dengan menulis di kolom komentar)

Namun begitu, bukan berarti memasang spoiler tidak membawa kerugian / kelemahan. Kerugian memasang spoiler adalah,

1. Blog akan ditinggalkan pengunjung. Tidak semua pengunjung mengerti cara membuka spoiler, ataupun ada pengunjung yang malas membuka spoiler
2. Saya juga belum tahu, apakah mesin pencari juga mengindeks isi spoiler atau tidak. Bagi sobat yang tahu, silakan komen dibawah.
3. dan lainnya (bisa sobat tambahkan dengan menulis di kolom komentar).

Demikianlah tutorial Cara Membuat Spoiler Buka Tutup Gambar Pada Postingan Blog. Silakan tulis di kolom komentar kalau sobat memiliki pendapat, ingin berbagi cerita keberhasilan menerapkan spoiler pada posting blog, ataupun ingin berbagi unek-unek karena gagal menerapkannya. Semoga bemanfaat untuk kita semua.

-Selamat Mencoba-

Tweet