Cara Membuat Kotak Spoiler di Postingan Blog dengan Tombol Buka Tutup

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.



TAMAT

12 comments for "Cara Membuat Kotak Spoiler di Postingan Blog dengan Tombol Buka Tutup"

  1. Keren bang tutorialnya, membantu banget buat tombol spoiler hehe

    ReplyDelete
  2. Saya dulu juga pernah membuat artikel semisal ini
    Tapi entahlah, apakah kini masih ada yang menggunakan kode tersebut.

    ReplyDelete
    Replies
    1. Hia mas ini pun artikel di blog saya yg lama, saya tulis ulang. Insaalah masih ada bagi yg gambarnya terlalu panjang bisa manfaatkan script ini hehe

      Delete
  3. mas, bikin spoiler ada yang versi smoothnya lho, kalau ga salah pakai accrodion deh, dulu saya pernah nyoba bikin

    ReplyDelete
    Replies
    1. hio kah gan saya malah belum tau e, nanti di coba deh hehe

      Delete
  4. wah.. saya belum pernah nyobain.. soalnya belum butuh..
    saya sedang cari kolom call to action nih bang... siapa tau bisa bantu buatkan postingannya.. hehe

    ReplyDelete
  5. Trims tutorial n kodenya mas. Bagus juga ada spoiler, blog jadi tidak terlalu panjang discroll ke bawah kalo banyak foto atau sekedar quote

    ReplyDelete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi. Bila berkomentar nggak sesuai dengan kebijakan Blogger maka nggak di terbitkan!
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging šŸ™‚.