Jenis Jenis Kotak Spoiler Cantik Blogspot

Spoiler, bagaimana cara membuat kotak spoiler di blog cukup mudah bagi pemula blog seperti kita nya :) lalu sebagian orang pasti sudah tau apa itu kotak spoiler. seperti biasa nya yang ada di forum forum yg begitu banyak yang telah terdaftar. lalu bagaimana cara membuat nya ya??
ok kita bahas tentang spoiler sedikit banyak nya :)
Contoh gambar spoiler :)

Kotak Spoiler adalah tombol yang bisa membuat tersembunyi/ataupun lebih simple suatu element atau konten bisa juga link (teks, video, gambar dll ) sehingga konten tersebut menghilang ataupun tersembunyi. untuk memunculkan nya, dengan cara mengklik ataupun menggeser kursor sobat, sehingga di menjadi  muncul dan menghilang :)  kren bukan?? pastinya

langkah langkah membuat kotak spoiler, login ke blog sobat
1. Setelah login, pilih tata letak di bagian template sobat
2. Pada mode postingan juga bisa, tapi kali ini kita dalam mode edit tata letak pada blog sobat seperti pada blog aneh
3. Oke, buka tata/letak, lalu tambahkan edit html > java/script
4. Lalu gunakan code Java/script berikut tepat ke akun blog sobat, di tata letak tadi :)
5. Setelah di copy pastekan, selesai di save

Spoiler Pertama :)

<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 Spoiler Pertama:  pada teks area tersebut, ubahlah kata "tempat mengisi image, tulisan atau apa saja"   anda dapat menukar teks tersebut sesuka hati, bisa menukar dengan video, link, ataupun gambar :)

Spoiler Kedua :)

SOROT AKU 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 Spoiler kedua: #pada teks area diatas ada kata "sorot aku dengan mouse" kata itu bisa anda ubah dengan kata sendiri, sebelum dia disorot oleh mouse nanti nya
#"Gimana Cantik Ga"  ,  teks itu terdapat pada textarea diatas dan boleh anda edit dengan memasukkan video, gambar ataupun video sesuka hati anda :)


Setelah di coba semua jangan lupa di save lihat hasil nya :)
thank you, please rate or comment