Cara Menambah Kotak Spoiler Pada Postingan Blog

Dalam postingan blog baik isi yang memiliki artikel panjang atau pendek ada baiknya menyertakan kotak spoiler. Kegunaan kotak spoiler ini tidak lain adalah tempat menempatkan sebuah kalimat tersendiri tergantung dari panjang pendek dari kalimat tersebut. Dengan kotak spoiler, tampilan postingan juga tampak lebih elegan dengan penampilan tombol "buka" "tutup" yang ditampilkan dari kode script spoiler.

Disini saya akan berbagi Cara Menambah Kotak Spoiler Pada Postingan Blog. Kita cukup menempatkan kode script spoiler pada tempat yang diinginkan dan lakukan pada type penulisan HTML, bukan Compose.

Pertama buatlah entry/postingan baru. Buat judul postingan, dan pilih type HTML dibawah tempat menuliskan judul. Kemudian copy dan letakkan kode script spoiler dibawah ke dalam penulisan HTML postingan sobat.

Disini saya berikan dua jenis kode script spoiler dan hasil bentuk spoilernya juga berbeda.
Kode Spolier 1 :
============
<br /><div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Buka'; }" type="button" name="button" value="LIHAT" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">Letakkan kalimat atau kata atau kode gambar atau video disini</div>
<div id="hide"></div>
</div>

Hasil bentuk Kode Spoiler 1

Letakkan kalimat atau kata atau kode gambar atau video disini

Keterangan : Tulisan yang warna biru adalah tempat kita menuliskan atau meletakkan kalimat atau kode gambar atau kode video

Kode Spoiler 2 :
============
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">Spoiler:
<input value="Buka"style="margin: 0px; padding: 0px; width: 60px;
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 = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">Letakkan kalimat atau kata atau kode gambar atau video disini<br>
</div>
</div>
</div>

Hasil bentuk Kode Spoiler 2

Spoiler:

Letakkan kalimat atau kata atau kode gambar atau video disini

Keterangan : Tulisan yang "warna biru" adalah tempat kita menuliskan atau meletakkan kalimat atau kode gambar atau kode video.

Itulah dua jenis bentuk kotak spoiler dan ada jenis lainnya. Tapi yang umum digunakan adalah dua jenis yang saya terangkan diatas. Semoga dengan Cara Menambah Kotak Spoiler Pada Postingan Blog sobat bisa lebih elegan penampilan postingnya.

Tweet