Cara Membuat Kotak Spoiler cantik

Dalam postingan kali ini EFA akan memposting artikel tentang Cara Membuat Kotak Spoiler cantik  saya kira semua sobat blogger mania dah tau apa itu spoiler. namun kali ini EFA akan memposting dengan sedikit sentuhan sehingga hasilnya nanti bisa sobat blogger mania lihat seperti yang terpasang di widget EFA. katok spoiler memang sudah lama populer yang biasa nya sering kita jumpai pada forum-forum seperti kaskus .us....di sini EFA 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 blogger mania 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/AVvXsEj5Nx6ESgN6DMeI6xc1y8TcALgUqu_vMkaUnECJFQY4tPavqLL6E2ROqrQbabF3Tx1yP1XHOZFpYKRSiKNi5udJEIP-x01TzPLAVpnirNAzHn7ySaJRSn90WR9pB9ov_c4_b1D1THlDMOZK/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

Demikianlah Sedikit Pengetahuan  yang bisa EFA share semoga artikel ini bisa membuat sobat berkreatif dan membuat postingan lebih cantik. itu yang EFA harapkan
 

  

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «