Membuat Spoiler Dengan JQuery II

Buat temen-temen blogger, kali ini saya mau bagi bagaimana cara membuat spoiler dengan efect jQuery, yang pastinya akan membuat blog kita lebih menarik donk.

Cara membuatnya :
1. Login blogger
2. Rancangan, edit html, cari kode </head> 
3. Simpan kode berikut tepat diatas kode tadi :

<script src='http://kangdadang.googlecode.com/files/jQuery.js' type='text/javascript'/>

Selanjutnya simpan kode berikut pada edit html posting kawan atau pada gadgetHtml/Java script :

<input onclick="$('#contoh').toggle(500)" type="button" value="click me to open" />
<div id="contoh" style="-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-box-shadow: 2px 2px 4px #8bd268; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-box-shadow: 2px 2px 4px #8bd268; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh13XEV17SkRbSEDZDljdySg-lJMQ_32NL95lQJh7pjBETnVozd06tu7vBm1zisK_JXNEQB2G3voCBDB7WcTHvFJ7vCqPACDOpXqK86FD18R7WO6WPwyZcgVHfZlHBVuepMVlvJZVf_Ahwp/s1600/papers.jpg ) no-repeat; color: black; display: none; padding: 10px 10px 10px 10px;">
Masukkan teks atau lainnya nya disini ssuai kebutuhan</div>

atau yang memakai scroll :

<input onclick="$('#contoh2').toggle(500)" type="button" value="click me to open" />
<div id="contoh2" style="-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-box-shadow: 2px 2px 4px #8bd268; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-box-shadow: 2px 2px 4px #8bd268; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh13XEV17SkRbSEDZDljdySg-lJMQ_32NL95lQJh7pjBETnVozd06tu7vBm1zisK_JXNEQB2G3voCBDB7WcTHvFJ7vCqPACDOpXqK86FD18R7WO6WPwyZcgVHfZlHBVuepMVlvJZVf_Ahwp/s1600/papers.jpg ) no-repeat; color: black; display: none; height: 100px; overflow: auto; padding: 10px 10px 10px 10px; padding: 10px; width: auto;">
Masukkan teks atau lainnya nya disini ssuai kebutuhan</div>

Catatan : Pada teks yang berwarna biru contoh dan contoh2 ditambahkan karena spoiler yang ada pada postingan ada 2, jadi kesimpulannya jika kawan ingin menambahkan spoiler nya, mislakan 3buah tinggal ganti id spoiler ke3 dengan contoh3 begitupun seterusnya.

Selamat mencoba.................