Membuat Spoiler (Show/Hide) Pada Blog

http://jayaputrasbloq.blogspot.com/2009/10/membuat-spoiler-showhide-pada-blog.html
Hai sobat blogger ketemu lagi kita dengan article ku yang baru... nan tak kala menarik juga. Sedikit saya terang kan dulu apa itu spoiler. spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar ukuran besar atau video tidak di load sebelum menekan tombol show. dengan kata lain spoiler membantu mengurangi waktu load konten blog dan memberikan pilihan kepada pembaca untuk membuka atau tidak isi spoiler. untuk lebih jelasnya lihat contoh di bawah ini
isi spoiler... (bisa image/script/link/ato widget)
Spoiler ini bisa di tampilkan pada sidebar maupun di postingan anda. nah untuk membuat nya ikuti saja langkah - langkah dibawah ini
  • Log in dulu ke blogger
  • kemudian klik layout pilih tata letak
  • klik Elemen halaman dan pilih add HTML/Java Script
  • Lalu copy paste kode di bawah ini

    <div><div style="margin: 5px;"> <div class="bigfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> isi spoiler... (bisa image/script/link/ato widget) </div></div></div></div>

  • Kemudian Simpan
  • Untuk kode berwarna merah bisa diganti keinginan anda

Selamat Mencoba...........

2 Responses to "Membuat Spoiler (Show/Hide) Pada Blog"

  1. klo di add html/javascriptnya sudah ada script yang lain gimana??? terimakasih

    BalasHapus
  2. ini yang aku cari. thax infonya ni buat ngemat t4..... hehehe

    BalasHapus

masukan anda terima kasih kami,
tanpa spam dan tanpa kata-kata kotor

Popular

Blog Archive

Silakan kunjungi :

iklan=herigator@gmail.com iklan=herigator@gmail.com iklan=herigator@gmail.com