Cara Membuat Kotak Spoiler di Postingan Blog dengan Tombol Buka Tutup

Cara Membuat Kotak Spoiler Buka Tutup - 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 Blog dengan Tombol Buka Tutup”.

Kotak Spoiler ini fungsinya menyembunyikan file yang terlalu panjang / lebar agar terlihat rapi dan tidak 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 gambar bagus to 😅 hehe, Sekian dulu ya pembahasannya.

TAMAT

Berlangganan update artikel terbaru via email:

7 Responses to "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

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 tidak sesuai dengan kebijakan Blogger maka tidak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel