Spoiler Blogger

Spoiler adalah suatu script yang digunakan untuk menyembunyikan link, gambar, pada suatu halaman posting, seluruh atau sebagian isi dari postingan blog kita, menaruh kode di postingan dan lain-lain. Spoiler dapat ditempatkan pada bagian posting, sidebar, footer atau dimanapun. Spoiler biasanya digunakan sebagai tempat link teks , link banner, award dan lain-lain sesuai keingginan kita.

Spoiler ini bermanfaat sekali karena bisa menghemat tempat maupun ruang pada blog, manfaat lainnya konten yang berat seperti gambar ukuran besar, video tidak melakukan loading sebelum tombol spoiler ditekan, sehingga dapat dikatakan spoiler sangat membantu mengurangi waktu loading konten blog, dan memberikan pilihan untuk membuka atau tidak isi spoiler yang pada akhirnya juga menghemat space pada blog kita.

Ada beberapa cara membuat spoiler, namun cara cara tersebut pada dasarnya juga sama hanya beda beda tipis pada cara membuatnya, tinggal anda pilih yang sesuai dengan mood anda saja.
Untuk selanjutnya anda tinggal copy paste saja kode kode dibawah ini dan tempatkan dimana yang anda sukai.

CARA 1 :
<div style=”margin:20px; margin-top:5px”>
<div class=”smallfont” style=”margin-bottom:2px”><b>Spoiler</b> for <i&gt;[JUDUL SPOILER]</i> : <input type=”button” value=”Show” style=”width:45px;font-size:10px;margin:0px;padding:0px;” 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’; }”>
</div>
<div class=”alt2? style=”margin: 0px; padding: 6px; border: 1px inset;”>
<div style=”display: none;”>
[ISI SPOILER]
</div>
</div>
</div>

Cara 2 :
<div style="text-align: justify;">
<span style="color: rgb(0, 0, 0);"><center><div id="spoiler"><div><input style="margin: 10px; padding: 0px; width: 100px;" value="Link Teks" 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 = 'Hide Link!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Link Teman'; }" type="button">
<div id="show" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 100%;">
<span style="color: rgb(0, 0, 0);"><span style="font-weight: bold;">
<span style="color: rgb(255, 0, 0);" >
<a href="http://namablog.blogspot.com/" target="_blank">Isi Spoiler</a>
</span></div>

Cara 3 :
<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Buka" 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 = '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, link, gambar, posting, dan lain-lain
</div></div></div></div>

Cara 4 :
<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Isi Spoiler, link, gambar, posting, dan lain-lain
</span></div></div></div></div></div>

Sekali lagi yang harus dilakukan adalah copy paste kode diatas ke dalam setiap postingan anda yang ingin anda dibuat spoiler. Untuk mengedit bagian JUDUL dan ISI, tinggal mengganti teks yang berwarna dengan link atau gambar sesuai yang anda inginkan.

Spoiler yang berisi gambar, upload dulu dengan photobucket, tinypic atau yang semacam, lalu ganti ‘isi spoiler’ dengan kode HTML gambar yang sudah diupload, kalau gambar terlalu besar, usahakan lebarnya tak lebih dari 10 cm
Spoiler berisi video, ganti ‘isi spoiler’ dengan embed kode video.

Selamat Mencoba

Dirangkum dari beberapa sumber :

• http://www.e-handbook.web.id
• http://blog.rheza.co.cc
• http://marcellinoagatha.blogspot.com

Contoh contoh isi spoiler

<a target="_blank" href="http://www.topseratus.com/"><img border="0" alt="100 Blog Indonesia Terbaik" src="http://www.topseratus.com/button.php?u=razor"/></a>

<a href="http://lookingforduit.blogspot.com/"><img alt="" src="http://www.platinumlounge.com/files/u6455/plagiator_0.jpg"/></a>

<iframe scrolling="no" frameborder="0" width="150" src="http://google.withme.us/logo-h23.htm" marginheight="0" height="60" marginwidth="0"></iframe>

<a href="http://onemission.com/"><img border="0" alt="oneMission" width="88" src="http://www.onemission.com/onebutton.gif" height="31"/></a>

<a href="http://www.exactseek.com/"><img border="0" alt="ExactSeek - Submit 4 FREE" width="88" src="http://www.exactseek.com/images/submit4.gif" height="31"/></a>

<a href="http://www.feedburner.com" target="_blank"><img alt="Powered by FeedBurner" style="border:0" src="http://www.feedburner.com/fb/images/pub/powered_by_fb.gif"/></a>