Cara Membuat Kotak Spoiler di Blog Versi 1

Yo~ Konnichiwa sobat Otatechnime

Mimin mau sharing-sharing tips blogging lagi nih, yaitu membuat kotak spoiler. Pada tau spoiler kan? Loh bukan, bukan yang di mobil 😁, nih spoiler yang ada di blog-blog loh. Yang gimana? Ya contohnya seperti ini:

Spoiler:

Ini Dia contoh dari Spoiler

Tuh, seperti yang diatas. Udah pada mudeng kan? Biasanya ini kotak spoiler digunakan untuk menghemat laman artikel atau juga buat bikin pembaca penasaran. Kotak tersebut berupa sebuah button teks spoiler dan kotak yang seakan-akan masih tertutup, dan setelah kita mengeklik tombol atau buttonnya, barulah konten yang ada di dalam kotak terbuka dan terlihat. Itulah kurang lebih penjelasan mengenai kotak spoiler. Seperti blog review mimin, banyak dikasih kotak spoiler. Itu buat opsi pembaca, ada yang mau baca atau ada yang engga.

Okeh, langsung saja mimin berikan blok kode nya

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
 <b>Spoiler</b>: < 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 = 'Tutup'; }
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> isi konten </div> </div> </div>

Yang males ngeblok kodingan, nih tinggal copy (klik Copy Code)

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Spoiler</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> isi konten </div> </div> </div>

Keterangan:

1. Pada bagian Spoiler, bisa diganti bebas. Itu untuk tulisan spiler pada kotak.

2. Kalian ganti isi konten dengan konten yang kalian ingin masukkan, seperti kalimat, paragraf, kode HTML ataupun gambar.
3. Kalian bisa ganti kata Buka dengan yang kalian mau seperti open atau jangan dilihat.

Cara memasukkannya:

1. Masuk terlebih dahulu ke blog kalian lalu buat entri baru atau edit post lama, itu terserah kalian.

2. Masuk ke tab HTML yang ada di sebelah Compose. Editor ini berfungsi sebagai pemasukkan konten yang menggunakan kode HTML.

3. Lalu paste kan kode yang kalian copy.

4. Jika ingin memasukkan kode di antara kalimat atau sesudahnya, perhatikan tag <br/>. Letakkan kode atau paste kode setelah tag tersebut. Jika bingung dapat lihat gambar.

Dan...yap kotak spoiler kalian sudah selesai. Simpan lalu publikasikan. Maka kotak spoiler kalian sudah dapat digunakan.
Untuk versi kotak spoler 2 bisa kalian baca di Cara Membuat Kotak Spoiler di BlogVersi 2

Share this

Unknown