Pasang Spoiler Diblog

Spoiler adalah suatu fitur yang dapat menampilkan suatu objek di dalamnya dengan modelshow,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 langkah-langkahnya :

1. Pilih Rancangan 

2. Pilih HTML/Java Script

3. Copy kode dibawah 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>

4. 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 biru adalah isi konten atau objek di dalam spoiler, kalian bisa menngantinya sesuai kebutuhan kalian.


Selamat Mencoba Semoga Berhasil...

Related Post: