Cara Membuat Tombol Spoiler (Show Hide)

Widget - Halo sobat blogger. Kali ini Love Karawang berkesempatan untuk menyajikan sebuah Cara Membuat Tombol Spoiler (Show Hide) yang mungkin banyak blog lain yang sudah membahas tutorial tersebut. Tapi meskipun begitu, saya yakin masih ada sobat yang belum tau apa itu tombil spoiler dan bagaimana cara membuatnya.

Tombol spoiler adalah tombol yang biasa digunakan untuk menyembunyikan kalimat/postingan, kode HTML/CSS, gambar, video dan lain-lain. Tombol spoiler banyak digunakan dan bisa sobat temukan di beberapa blog ataupun forum dan menurut saya tombol tersebut memiliki kegunaan seperti membuat pembaca menjadi penasaran sampai bertanya-tanya apa isinya, menghemat postingan, dan menjahili pembaca dengan menyisipkan gambar hantu (tidak baik untuk ditiru loh).

Nah untuk membuat tombol spoiler ini caranya sangat mudah dan sobat tidak perlu melakukan oengeditan lagi. Ok, simak cara membuatnya dibawah ini.

Cara Membuat Tombil Spoiler (Show And Hide)

• Pertama pastikan sobat sudah login di situs blogger dan juga sudah masuk di blog milik sobat yang nantinya akan digunakan untuk buat tombol spoiler.
• Kemudian klik Entri Baru/New Post untuk membuat postingan baru. Sobat juga bisa membuatnya di halaman dengan mengklik Buat Halaman Baru/Create New Page. Jika sobat ingin membuat tombol spoilernya di postingan/halaman lama silahkan edit postingan/halaman lama tersebut.
• Setelah itu klik halaman HTML yang berada disebelah halaman Compose.
• Copy kode dibawah ini dan pastekan ke dalam halaman HTML tadi. 

<div style="margin:0 auto; text-align:center;">
<div class="kalshohi" style="margin-bottom: 2px;">
<input 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 = 'sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'buka'; }" style="font-size: 12px;width: 50px;" type="button" value="Lihat!" />
</div>
<div class="kalshohi2" style="border: 1px inset; padding: 4px;">
<div style="display: none;">
Letakkan Gambar, Video, Javascript/HTML Disini</div>
</div>
</div>

• Silahkan sobat publish atau preview terlebih dahulu untuk hasilnya. Selesai.

Jika sobat penasaran, kira-kira hasilnya akan seperti ini:

Letakkan Gambar, Video, Javascript/HTML Disini

Loading