Membuat Spoiler Show Hide Keren di Blog

Penggunaan Spoiler pada awalnya diterapkan di situs forum seperti kaskus, indowebster, dan forum lainnya untuk menyembunyikan tulisan atau gambar yang terlalu panjang. Namun seiring meingkatnya dunia blogging penggunaan Spoiler juga kerap diterapkan di blog dan website.

Keuntungan menggunakan Spolier konten yang Anda tampilkan baik berupa teks, gambar, video akan tertata rapi sehingga pengunjung merasa betah menelusuri blog Anda. Berikut ini akan dibagikan dua kode Spolier, Spoiler yang pertama tanpa bingkai dan Spoiler yang kedua dengan bingkai.

1. Kode Spoiler pertama

<div id="spoiler" style="display:none">

Tulisan atau gambar yang disembunyikan

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button> 

Contoh penggunaan Spoiler gambar/ image :

• Upload gambar di blogger.

• Ubah dari Compose ke HTML lalu copy kode gambar tersebut.

• Kembali ke kode Spoiler dan paste kode gambar tersebut. Lebih jelasnya lihat contoh di bawah ini.

<div id="spoiler" style="display:none">

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--VWjxgSqXpI/VIN-3cCopXI/AAAAAAAAFrg/jvrRP1kGH0s/s1600/Suny.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/--VWjxgSqXpI/VIN-3cCopXI/AAAAAAAAFrg/jvrRP1kGH0s/s1600/Suny.jpg" height="400" width="295" /></a></div>
<br />  

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button> 

Hasilnya

Catatan
Open/ Close bisa disesuaikan dengan nama spoiler yang Anda ingingkan.


2. Kode Spoiler kedua

<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;">

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

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

Hasilnya 

Pengertian Spoiler 

Dalam media dan Internet, beberan (bahasa Inggris: Spoiler) adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Membaca beberan dari suatu cerita dapat menyebabkan berkurangnya kesenangan membaca cerita itu, karena kesenangan membaca sebuah cerita biasanya tergantung kepada dramatisasi atau ketegangan yang ditimbulkan oleh cerita tersebut. Biasanya dalam media massa maupun Internet, beberan disembunyikan dengan cara tertentu, sehingga hanya terbaca oleh yang ingin melihat beberan tersebut.

Catatan
Tulisan Judul Spoiler dan Buka bisa diubah sesuai dengan keinginan Anda.