Spoiler with jQuery II
Demonya bisa dilihat disini
- Cara membuatnya :
- Login blogger
- Rancangan, edit html, cari kode </head>
- Simpan kode berikut tepat diatas kode tadi :
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/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 :<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/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/s1600/papers.jpg ) no-repeat; color: black; display: none; padding: 10px 10px 10px 10px;">
Masukkan teks atau lainnya nya disini ssuai kebutuhan</div>
<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/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/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>
<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/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/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...
Show
0 Comments
prev
next
