Membuat Spoiler (Show-Hide) Pada Blogger

Hehehe... lagi-lagi trik lama yang di share...
Namanya juga saya masih Newbe, saya share disamping berbagi itu indah, juga untuk pemakaian saya sendiri...

Fungsinya adalah untuk menyembunyikan postingan yang berupa kode, atau gambar agar postingan pada blog tidak terlalu panjang lebar dan menghemat ruang pada blogspot dan juga untuk mempercepat loading blog sobat, jika sobat hendak memasang postingan gambar yang banyak. Sebab jika postingan gambar pada suatu blog terlalu banyak dapat mempengaruhi loading (streamming pada blog)

Untuk contohnya yang saya punya sih seperti yang ada di Kakus Kaskus. Sobat bisa lihat contoh dibawah ini :

Coba Sobat Click ! >>

Berikut Hanya Contoh Saja

Bagaimana cara membuatnya ?
cara membuatnya cukup mudah kok... 


Copy dan pastekan kode berikut pada html dipostingan blog sobat, atau pastekan pada Gadget Html di Blog sobat :

Coba Dibuka...! >>

<div>
<div style="margin-bottom: 2px;">
<i><b><small>Free Download Bokep</small></b></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="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

GANTILAH DENGAN KODE GAMBAR ATAU TULISAN SOBAT DISINI

</div>
</div>

</div>
<div>
<style>
.adslot-overlay {position: absolute; font-family: arial, sans-serif; background-color: rgba(0,0,0,0.65); border: 2px solid rgba(0,0,0,0.65); color: white !important; margin: 0; z-index: 2147483647; text-decoration: none; box-sizing: border-box; text-align: left;}.adslot-overlay-iframed {top: 0; left: 0; right: 0; bottom: 0;}.slotname {position: absolute; top: 0; left: 0; right: 0; font-size: 13px; font-weight: bold; padding: 3px 0 3px 6px; vertical-align: middle; background-color: rgba(0,0,0,0.45); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}.slotname span {text-align: left; text-decoration: none; text-transform: capitalize;}.revenue {position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; padding: 3px 0 3px 6px; vertial-align: middle; text-align: left; background-color: rgba(0,0,0,0.45); font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}.revenue .name {color: #ccc;}.revenue .horizontal .metric {display: inline-block; padding-right: 1.5em;}.revenue .horizontal .name {padding-right: 0.5em;}.revenue .vertical .metric {display: block; line-height: 1.5em; margin-bottom: 0.5em;}.revenue .vertical .name, .revenue .vertical .value {display: block;}.revenue .square .metric, .revenue .button .metric {display: table-row;}.revenue .square .metric {line-height: 1.5em;}.revenue .square .name, .revenue .square .value, .revenue .button .value {display: table-cell;}.revenue .square .name {padding-right: 1.5em;}.revenue .button .name {display: block; margin-right: 0.5em; width: 1em; overflow: hidden; text-overflow: clip;}.revenue .button .name:first-letter {margin-right: 1.5em;}a.adslot-overlay:hover {border: 2px solid rgba(58,106,173,0.9);}a.adslot-overlay:hover .slotname {border-bottom: 1px solid rgba(81,132,210,0.9); background-color: rgba(58,106,173,0.9);}a.adslot-overlay:hover .revenue {border-top: 1px solid rgba(81,132,210,0.9); background-color: rgba(58,106,173,0.9);}div.adslot-overlay:hover {cursor: not-allowed; border: 2px solid rgba(64,64,64,0.9);}div.adslot-overlay:hover .slotname {border-bottom: 1px solid rgba(128,128,128,0.9); background-color: rgba(64,64,64,0.9);}div.adslot-overlay:hover .revenue {border-top: 1px solid rgba(128,128,128,0.9); background-color: rgba(64,64,64,0.9);}
</style></div>

Selamat Mencoba, dan bisa dikembangkan lagi yah...! Mohon masukannya untuk kesempurnaan pada tiap-tiap postingan di blog saya ini melalui komentar anda ! 

Terima kasih