Cara Membuat Spoiler di 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 (teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca meng-klik tombol. 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.

Masalahnya, pada blog di blogger tidak tersedia fitur spoiler seperti pada forum-forum yang menggunakan vbulletin, yang bisa digunakan dengan hanya menekan tombol add spoiler yang tersedia pada menu panel posting, yang kalaupun tidak ada, kita bisa menambahkannya dengan mudah, yaitu dengan menggunakan kode [spoiler="judul spoiler"]isi konten gambar tulisan video[/spoiler].

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

Cara Membuat Spoiler di Blog

Sebenarnya terdapat banyak cara untuk membuat spoiler dalam posting blog. namun kali ini WebKeren hanya akan membahas 2 cara membuat spoiler di blog, yaitu:

1. Pada cara pertama, tombol spoiler akan "terlempar" ke bawah isi spoiler ketika dibuka. 
2. Pada cara kedua, spoiler akan tetap berada pada posisinya ketika dibuka. 

Baiklah, agar tidak berbelit-belit, kita akan langsung pada pembahasan cara membuat spoiler

1. Membuat Spoiler di Blog dengan Tombol Spoiler Terlempar ke bawah

Sulit untuk menjelaskan dengan kata-kata tentang spoiler ini. Agar lebih jelas, langsung saja sobat lihat dan coba contoh demo tombol spoiler berikut.

Contoh Isi Spoiler Text

Contoh Image dalam Spoiler

Begitulah kira-kira gambaran spoiler jenis ini. 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).

<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>

Keterangan:

1. Tempatkan isi teks/image/video spoiler pada teks berwarna biru.
2. Ganti teks berwarna merah ("BUKA/TUTUP SPOILER" dan "Klik untuk membuka spoiler") sesuai keinginan.
3. Untuk mengganti warna box, ukuran text, warna, dan lainnya, ganti/sesuaikan teks berwana orange.

Membuat Banyak Spoiler pada Satu Posting / Halaman Blog
Jika Sobat mau menggunakan beberapa spoiler dalam satu halaman posting, gunakan id unik untuk setiap spoiler. caranya adalah dengan mengganti kata "spoiler" dalam kode dengan kata lain. contohnya seperti berikut (perhatikan yang berwarna biru).

Kode Spoiler Pertama

<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>

Kode Spoiler Kedua

<div id="spoiler1" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>

Kode Spoiler Ketiga

<div id="spoiler2" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>

dan seterusnya

2. Membuat Spoiler di Blog dengan Posisi Button Tetap

Sama seperti cara pertama, berikut ini contoh demo spoiler dengan posisi button tetap (seperti spoiler forum).

Judul Spoiler:

Contoh Isi Spoiler Text

Contoh Image dalam Spoiler

Untuk bisa menerapkan kode buka/tutup spoiler di blog dengan posisi tombol tetap 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 (klik spoiler dibawah untuk melihatnya kode spoiler posisi tetap).

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div>

Keterangan:

1. Tempatkan isi teks/image/video spoiler pada teks berwarna biru.
2. Ganti teks berwarna merah (Judul Spoiler dan buka) sesuai keinginan.

Namun begitu, mungkin Sobat merasa kurang puas dengan tampilan spoiler tersebut, sobat bisa menambahkan style (perhatikan kode berwarna biru) seperti berikut.

<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="background: red; border: 1px solid blue; color: white; font-size: 12px; padding: 5px 50px 5px 50px;" type="button" value="Buka" /></div>
<div class="alt2" style="background: cyan; border-left-color: lightblue; border-left-style: solid; border-left-width: 10px; color: blue; padding: 5px 2px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
</div>
</div>
</div>

Hasilnya akan menjadi seperti ini

Judul Spoiler:

Letakkan teks atau kode script (gambar atau video) di sini

Variasi Lainnya

INILAH Isinya :p

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. Webkeren.Net 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 pada Posting di 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.

sumber:
	http://www.bloggersentral.com/2009/12/create-show-hide-or-peek-boo.html
	http://kurniasepta.blogspot.com/2012/02/cara-membuat-spoiler-di-blog.html

Posted in: