Cara Membuat Spoiler Di Blog

Friday, November 23, 2012

Klik Gambar Untuk Memperbesar
Bagi Kalian anggota di forum seperti kaskus, detikforum, dll tentu tidak asing lagi dengan yg namanya spoiler.
Spoiler sendiri gunanya untuk menghemat tempat dan mempercepat loading, karena isi didalam spoiler tidak akan di load sebelum spoiler itu di buka

Biasanya spoiler diisi dengan video atau gambar beresolusi tinggi
nah, kali ini aku akan bebagi cara membuat Spoiler di blog
Pertama Masuk akun blogger >>> Buat Entri >> Pilih HTML

Kemudian copas kode dibawah ini

Kode Spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>JUDUL SPOILER</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div>
</div>
</div>

selain itu spoiler juga bisa membikin pembaca penasaran atau untuk mengerjai pembaca, seperti contoh spoiler di bawah ini

Kucing Garong siap Menerkam Ayam Kampus Mulus Tanpa Bulu:
Ciluk baaaaaaaa
wakakakakak
Foto: okezone
wah itu Ayam Kampus Atau Ayam Kampung ya ?
Buset Mulus bener, pasti rasanya krenyes krenyes tuh !!!
Tuh Kucing Garong ampe gitu ngeliatinnya (termasuk pembaca artikel ini)
Mantap bener dah

Selamat Mencoba ya Dap !!!

12 komentar:

  1. Replies
    1. [1] ya memang begitulah kodenya :D

      Delete
    2. canggih nih blognya kok bisa kaya gini mas :

      http://haidarax.blogspot.com/p/bingkai.html?lxxt%3E33pmqmxtswx2fpskwtsx2gsq3CyxqcwsyvgiAlemheve|2fpskwtsx2gsq

      gimana mas cara bikinnya :D

      Delete
    3. mau tutorial yg kayak gitu mas ?
      ya kapan2 aku bagikan tutornya :D

      Delete
  2. kereen..
    tapi kodenya puanjaaang..

    ReplyDelete
  3. Wahh mantef banget nih bang Haidar tutornya trims ya..hahahyy

    ReplyDelete