Cara Mudah Membuat dan Memasang Spoiler di Blog

Apa itu spoiler? Saya yakin teman-teman blogger sudah pada tahu semua mengenai arti dari spoiler ini yaitu sebuah script yang berfungsi sebagai tombol buka tutup (open close button). Spoiler telah banyak digunakan didalam web blog site karena fungsinya yang sangat membantu tampilan sebuag web blog site itu sendiri. Salah satu kesamaan dengan spoiler ini adalah scroll bar dan tab view yang juga memiliki fungsi yang sama diantara ketiganya.

Apa saja fungsi tombol spoiler ini untuk sebuah blog?

1. Membuat tampilan minimalis
2. Menghemat ruang tampilan pada blog
3. Menyembunyikan objek atau teks yang ada didalam blog atau artikel
4. dan sebagai tombol yaitu open close button

Begitu juga dengan 'temannya' yaitu scroll bar dan tab view, keduanya juga memiliki fungsi yang hampir sama dengan spoiler ini yaitu sama-sama memiliki 3 poin teratas dari fungsi spoiler yang saya sebutkan diatas. Lalu bagaimana cara membuat spoiler di blog? Untuk membuat spoiler di blog, anda cukup memasang kode spoiler berikut diamanapun yang ingin anda buat tampilannya menjadi hemat ruang dan minimalis sehingga tidak memakan ruang yang ada di blog anda.

Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini 

1. 
   Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini

   <div align="left" style="margin: 5px 10px 10px;">
   <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
   <div class="alt2">
   <div style="display: none;">
   <div style="border: medium none; padding: 10px; text-align: left;">
   Ganti dengan objek atau teks yang anda inginkan
   </div>
   </div>
   </div>

2. 
   Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini

   <div style="margin: 5px 10px 10px;">
   <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
   <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
   <div style="display: none;">
   Ganti dengan objek atau teks yang anda inginkan
   </div>
   </div>
   </div>

3. Keterangan:
   Warna merah : Silahkan ganti dengan objek atau teks yang anda inginkan

ATAU

coba liat tampilan spoiler di bawah ini:

Untuk membuat spoiler seperti di atas, maka kita cukup menggunakan kode dibawah ini:

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

Isi Spoiler . . .

</div>
</div>
</div>

</div>

Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo sobat blogger mau memasukkan kode HTML, sobat blogger harus parse dulu kode HTMLtersebut agar kodenya tidak langsung bekerja. Buat parse kode HTML Untuk gambar, cukup ganti tulisan yang berwarna hijau dengan kode <img src="url gambar"> (kode HTML untuk memanggil gambar).

Secara umum kode untuk membuat spoiler di blog sama seperti kode di atas, tapi sobat blogger bisa sedikit modifikasi sehingga hasilnya nanti bisa sesuai keinginan.

Terimakasih.