Memasang spoiler pada blog

Spoiler adalah suatu fitur yang dapat menampilkan suatu objek di dalamnya dengan model show,hide. Spoiler banyak dijumpai di forum-forum. spoiler berguna untuk menghemat tempat. dengan spoiler, kita dapat menyembunyikan suatu objek dan menampilkannya dengan mengklik tombol spoiler.

Cara memasang spoiler pada blog menggunakan sebuah script yang lumayan panjang. spoiler pada blog biasanya dipasang pada sidebar blog. objek di dalam spoiler biasanya adalah gambar-gambar atau video, namun kita juga bisa menyisipkan tulisan dan yang lainnya. Berikut ini contoh spoiler :




KONTEN KALIAN DISINI

Tutorial membuat widget spoiler show, hide pada blog adalah sebagai berikut :
1. Menu Dashboard, klik Tata Letak, klik Tambah Gadget, HTML/Javascript.
2. masukkan kode berikut ini:
<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

KONTEN KALIAN DISINI

</div></div></div></div></div>
3. Klik Simpan.

Keterangan script :
1. kode yang berwarna merah (style italic/miring) harus sama. kode ini sebagai judul tombol show/open. kalian bisa mengganti judulnya.
2. kode yang berwarna merah (tanpa style italic/miring) adalah kode untuk judul tombol hide/close. kalian bisa menggantinya.
3. kode yang berwarna hijau adalah kode untuk mengganti warna. kalian bisa menggantinya.
4. kode yang berwarna biru adalah isi konten atau objek di dalam spoiler, kalian bisa menngantinya sesuai kebutuhan kalian.

preview spoiler :


Sekian tips dan trik mempercantik blog dengan memasang widget spoiler pada blog.

1 komentar:

  1. terimakasih sob...

    semoga sukses selalu...

    ==================================================
    oya,,sob gimana ya caranya biar auto open iklan bila cursor diarahkan pada iklan tersebut??

    BalasHapus