Jumat, 25 Maret 2011

Membuat Spoiler (Show/Hide) Pada Blog


Hai sobat blogger ketemu lagi kita dengan article ku yang baru... nan tak kala menarik juga. Sedikit saya terang kan dulu apa itu spoilerspoiler 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


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...........

Tidak ada komentar:

Posting Komentar