Koleksi spoiler-spoiler cantik dan menarik

Spoiler..mungkin ga asing buat sobat sekalian..!!suatu bentuk tobol show hide yang berfungsi untuk menyembunyikan dan menanpilkan gambar,tulisan maupun kode script lain nya,katok spoiler memang sudah lama populer yang biasa nya sering kita jumpai pada forum-forum seperti kaskus .us....di sini saya mencoba berbagi pengalaman tentang membuat kotak spoiler yang cantik dan keren...

Dan juga ada satu hal lagi yang dapat di ambil mamfaat nya pada kotak spoiler ini bisa meringan kan beban blog yang menyimpan gambar yang besar jadi kalau kita ingin memposting dan upload gambar dengan ukuran yang lumayan besar alangkah baik gambar tersebut di sembunyikan di kotak spoiler agar loading blog lebih ringan dan kotak spoiler bisa juga untuk menyimpan kode script mau pun widget.

Silahkan sobat pilih koleksi spoiler yang sobat sukai

1. Kotak Spoiler Berwarna

Kode nya :

<div>
<div style="margin: 5px;">
<div class="normalfont" 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="background: none repeat scroll 0% 0% rgb(0, 102, 204); color: #ffffcc; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: blue; padding: 10px; text-align: justify;">
TEMPAT MENGISI IMAGE ,TULISAN ATAU APA SAJA </div>
</div>
</div>
</div>
</div>

Catatan : kode berwarna merah dan bercetak tebal  bisa anda  memasukan  gambar,tulisan maupun kode Script .

2. Kotak Spoiler Animasi Sentuh

SOROT DISINI DENGAN MOUSE

GIMANA CANTIK GA..????

Kode nya :

<style type="text/css">
.stevevai{margin:0 auto;text-align:left;font-size:large;color:red;overflow:hidden}.rumpun{background:#fff; color:blue;font-size: 3em; font-family:'arial';font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:900px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
</style>
<br />
<div class="stevevai" id="vanhalen">
SOROT AKU DENGAN MOUSE<br />
<div class="rumpun">GIMANA CANTIK GA </div>
</div>

Catatan :

• SOROT AKU DENGAN MOUSE : Tulisan awal sebelum di sentuh mouse

• GIMANA CANTIK GA : Tulisan yang berada di dalam spoiler sentuh.

3. Kotak Spoiler dengan gambar

lihat selanjut nya

Kode nya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSQpEJns2NfzzN554tw9Co1rA2Q0h9OA43vKULZHKlPvfXDT-be0ilq080TM9n4iwH2Zf1Mg4RzusO3_qe-tXVg8sVk6QVfvNXiTBWIdBHCNGbpMBgWjV6cAOcnGjcFAYhuFFzHWYbGE5/s1600/flying-bird-icon.png" /><span style="font-size: large;">lihat selanjut nya</span></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 = ' Close..'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Clik Here'; }" style="font-size: 10px; margin: 5px; padding: 0px; width: 80px;" type="button" value="Open!!!" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER</div>
</div>
</div>
</div>

Catatan :

• Tulisan berwarna merah adalah link gambar  bisa anda ganti gambar nya dengan yang lain nya.

• Yang berwarna biru adalah isi dari spoiler bisa anda isi dengan tulisan ,gambar maupun kode script

Semoga artikel ini bisa membuat sobat berkreatif dan membuat postingan lebih cantik.

By : syafrizal (Dunia Desain Web)