Posted byTeacher's MessageDalam 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.
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 .
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>
<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 nyaKode 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>
<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
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 «
