Hai sobat Blogger ! saya mau tanya nih,,,siapa disini yang suka lihat-lihat thread atau malah jadi member di situs kaskus.us?yang sering atau pernah ke kaskus pasti pada mengenal yang namanya spoiler dong,spoiler adalah tombol yang digunakan untuk meringkas suatu tampilan dengan cara menyembunyikannya di balik tombol tersebut,jika diklik,maka tampilan yang disembunyikan akan dimunculkan,dan hebatnya lagi dapat ditutup/disembunyikan lagi,contoh spoiler tersebut adalah bisa dilihat di gambar diatas / widget di panel kanan blog ini
Sobat tertarik untuk membuatnya di blog sobat?caranya cukup mudah kok,dijamin gak repot deh,hehehe
1.) Login ke akun blogger sobat
2.) Langsung menuju ke Dashboard > Rancangan > Edit tata letak > Tambah widget > Edit html/javascript . lalu copy kode berikut ini ke dalam form html yang ada
Kode
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Klik untuk melihat </span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...</div>
</div>
</div>
</div>

isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...



3.) Ganti tulisan "Klik untuk melihat/Menyembunyikan" sesuai dengan keinginan sobat misalnya klik,buka,open,dll
4.) Ganti tulisan "Isi teks spoiler" dengan isi / tampilan yang akan ditampilkan setelah tombol tersebut di klik
5.) Untuk menghilangkan kedip ( kelap-kelip ) hapus saja kode <blink> dan </blink> diantara teks isi spoiler
6.) Ganti Buka/Tutup dengan kata yang diinginkan
7.) Terakhir,klik simpan dan lihat hasilnya

0 komentar:

Poskan Komentar

Copyright © 2012 My Katsu / Template by : Urang-kurai