Cara membuat tombol Hide-show di blog
Hai....Sahabat blogger.....!!!
Kali ini saya akan menerangkan bagaimana cara membuat tombol hide-show atau sering juga disebut dengan istilah spoiler.., sebelum saya menerangkan ada yang tau bagaimana sih cara kerja tombol hide-show itu..??
Kalau kalian belum tau saya akan kasih contohnya deh...
Kali ini saya akan menerangkan bagaimana cara membuat tombol hide-show atau sering juga disebut dengan istilah spoiler.., sebelum saya menerangkan ada yang tau bagaimana sih cara kerja tombol hide-show itu..??
Kalau kalian belum tau saya akan kasih contohnya deh...
Jadi manfaat tombol hide-show itu sendiri adalah untuk mempersingkat artikel kalian, dimana jika kalian sedang membuat sebuah artikel atau postingan yang panjang tentu pembaca juga akan sangat bosan membacanya, Jadi dengan ditambahkannya tombol hide-show ini pembaca akan lebih mengerti dan tidak pula gampang bosan.
tidak hanya untuk gambar saja lho..kalian juga bisa memasukan gambar, teks, video atau apa saja yang menurut kalian perlu untuk disngkat..
Oke...kita langsung aja ya ke T..K..P deh..
Untuk membuat tombol Hide-Show ini kalian perlu membutuhkan Script ini aja.
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Show" 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'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan kalian isi dengan apa yang perlu kalian singkat.
</div></div></div></div>
= Untuk yang berwarna merah kalian bisa ganti dengan apa aja contoh ( tampilkan-sembunyikan) atau apa saja boleh, terus yang berwarna biru itu kalian isi dengan apa yang perlu kalian singkat,
Nah....kalau cara memasangnya gampang kok ayo ikuti langkah-langkahnya..
1. seperti biasa kalian masuk ke akun blogger
2. Pilih "Rancangan"
3. Tambah gadget/ add gadget lalu pilih HTML/ javascript
4. Terus simpan deh kode diatas dan simpan.
Selesai....
Selamat mencoba....Hatur nuhun (terima kasih)
Komentar ini telah dihapus oleh pengarang.
BalasHapus:24 :29 cara buat tempat komentar ada smelly kayak blog ini gitu kayak mana ya? balas ya ke http://emprorerfaisal.blogspot.com/2011/11/pembantaian-orang-utan-di-kalimantan.html
BalasHapusSobat bisa lihat di postingan saya..
BalasHapushttp://diemyblogger.blogspot.com/2011/12/cara-memasang-emoticon-kaskus-di.html
Jangan lupa tinggalkan comment ya..
terima kasih..