Cara Membuat Kotak Spoiler pada postingan Blog dengan Buka Tutup

Sebenarnya saya sudah lama mau share tentang cara membuat spoiler buka tutup pada blog, tapi kenapa akhirnya saya kelupaan,nah mumpung sekarang saya sudah ingat lagi, jadi langsung saja saya tulis tutorial ini.

Spoiler ini bisa di gunakan jika artikel sobat cukup panjang dan bermanfaat untuk menyembunyikan gambar, script,tulisan atau lain-lain sehingga membuat halaman blog sobat menjadi sedikit lebih ringan loadingnya, kenapa lebih ringan? karena postingan sobat yang panjang lebar bisa di sembunyikan dan tidak terbuka semua secara langsung, sebagai contoh silahkan sobat klik tulisan ''BUKA'' pada spoiler di bawah ini :

Batuk Gan . . .

1. Pertama pilih tempat yang akan di pasang spoiler ini,baik di postingan atau di sidebar.
2. Copy script di bawah ini,
3. Kalau sobat ingin pasang di postingan,maka sobat taruh di bagian HTML bukan COMPOSE

 <div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: center;"> <input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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'; }" type="button"> </div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> GANTI DENGAN TULISAN ATAU SCRIPT SOBAT DISINI </div> </div> </div> <br> <br> <br>

• jika sudah lihat hasilnya ,maka tombol buka tutup ini siap untuk di gunakan..

Bagaimana sobat semuanya,,apakah tertarik dengan tutorial ini,jika ia silahkan di coba dulu,semoga berhasil,dan..

SEMOGA BERMANFAAT

Terimakasih Telah Berkunjung !!

Bagikan Ke :

Facebook Google+ Twitter