Cara Membuat Kotak Spoiler di Postingan Blog dengan Tombol Buka Tutup

ARDINTORO |dot| COM - Hae Sobat lagi bikin apa ini? Pasti lagi bikin sesuatu ya? (jawab sendiri) 😂 hehe. Yup berarti sama dong dengan saya, ini juga lagi bikin sesuatu, hemm langsung ke TKP ya. Pada kesempatan kali ini, masih membahas tentang tutorial blogger.

Kalian pernah nggak browsing di blog atau website dan melihat ada kotak yang bisa membuka dan menutup sendiri, pasti pernah kan 😅?. Yupp terenggg inilah pembahasan pada tulisan kali ini yaitu “Cara Membuat Kotak Spoiler di Postingan dengan Tombol Buka Tutup”.

Kotak Spoiler ini fungsinya menyembunyikan file yang terlalu panjang / lebar agar terlihat rapi dan nggak merusak pemandangan postingan, file itu bisa berupa: Foto, script, tabel dll. Semua bisa di kreasikan sesuka hati agar postingan semakin menarik.

Inilah tahapan-tahapannya. Kalian simak secara seksama ya Sobat agar bisa sukses dalam memasang, script ini sudah saya pakai dari tahun 2013 dan ingin memasang kembali di blog yang baru (ardintoro.com), ini contoh penampakannya bila di terapkan pada postingan: DEMO.

Cara memasang: Pertama Kalian masuk ke dasbor masing-masing, setelah itu Sobat lanjut masuk di panel buat entri baru atau postingan baru, di situ ada tombol COMPOSE dan HTML Sobat pilih yang HTML. Kalo sudah sampai tahap ini tinggal Kalian paste saja kode script di kolom HTML. Klik simpan untuk melihat hasilnya.

Ih lupa ngomong-ngomong dari tadi bicara kode HTML e kok malah lupa kasih kodenya 😂, jangan kawatir ya Sobat, ini kode HTML-nya. Perlu di perhatikan PENTING! Kalian lihat di kodenya ada tulisan "Ganti dengan tilisan atau Script Sobat di sini" itu yang musti di ganti, bisa dengan foto, tabel, kode script dll. Terserah sesuaikan kebutuhan. 

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

Setelah semua langkah di atas selesai, sampailah di penghjung acaranya 😁. klik seve dan lihat hasilnya. Contohnya ada di bawah ini ya Sobat, kalau di isi dengan gambar bagus to 😅 hehe. Sekian dulu ya pembahasannya.

Baca Juga: Cara Membuat Kotak Scroll Keren Pelengkap Postingan Blog

TAMAT

Share :