if (window.jstiming) window.jstiming.load.tick('headEnd');
Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

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 «


5comments:

  1. cantik tenan numpang kopas gan..........

    ReplyDelete
  2. mantap juragan. tapi ditempatku gambar ngk muncul mohon pencerahan gan.........dibina maksudnya..

    ReplyDelete
  3. Wah ini die yang ane cari cari praktekin dulu ah........mantap nian..

    ReplyDelete
  4. Mantap Bos, Pamit ingin CoPas. trmksh

    ReplyDelete
    Replies
    1. If you wanna capy and paste,, please..knowledge must be handed down from one generation to other generation

      Delete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev