Spoiler with jQuey II

1.Spoiler with jQuery

don’t open me… hahahaha…

Dan berhasil dibuka kawan

2.Spoiler with jQuery dengan scroll

don’t open me… hahahaha…

Dan berhasil dibuka kawan

Cara membuatnya:

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

<script src='http://h1.ripway.com/pandet/Pandet-Spoiler with jQuery.js' type='text/javascript'/>

Selanjutnya simpan kode berikut pada edit html posting kawan atau pada gadget Html/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(http://4.bp.blogspot.com/_BGDhxsVUJhU/TVLc2PYGKUI/AAAAAAAABTY/Xgg2ieWPNpk/s1600/wallpaper_1019.jpg ) no-repeat; color: black; display: none; padding: 10px 10px 10px 10px;">
Masukkan teks atau lainnya nya disini sesuai 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(http://4.bp.blogspot.com/_BGDhxsVUJhU/TVLc2PYGKUI/AAAAAAAABTY/Xgg2ieWPNpk/s1600/wallpaper_1019.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 sesuai 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 mencona.................

Tweet