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

JASA ARTIKEL: HUBUNGI Email kami di jptr273@gmail.com bagi bos yang membutuhkan JASA ARTIKEL BOLA yang berpengalaman di bidangnya. terimakasih

Berlangganan via RSS Feed

Anda Ingin artikel seperti ini langsung ke Email anda Silahkan masukkan alamat Email anda Untuk Berlangganan :

CHAT di halaman depan blog ini

Informasi Pemasangan Iklan:
Hubungi Kami: J_Putra
Email: jptr273@gmail.com