Tutorial Membuat Spoiler/Hide pada Postingan Blog Disertai Video Tutorial

Selamat sore

Kali ini, saya mau share tutorial untuk membuat spoiler pada blog.

Sekalian cara menggunakannya dalam postingan blog.

Rerata blog teman saya, menggunakan ini pada setiap postingan soalnya.

Jadi soal dulu, kemudian muncul ikon pembahasan yang di hide

Saya sudah lama ingin mencobanya, akhirnya baru sekali ini bisa dilakukan.

1. Buka postingan blog, Entri Baru

2. Seperti biasa, buat kata pengantar pada postingan blog, misal "Ini adalah soal SIMAK UI 2020, silahkan dikerjakan dahulu sebelum ke pembahasan. Selamat mengerjakan."
Isi pesan pembuka itu tidak ada keharusan. Tergantung yang punya blog saja. Kalau saya seperti itu buatnya.

3. Ketik soal, yang menggunakan equation, saya sarankan menggunakan https://www.rumusstatistik.com/2016/12/membuat-rumus-matematika-dengan-latex.html

Mudah, tinggal ketik, dan bisa copy di html nya.

4. Catatan: Untuk soal berbentul html, copynya di html ya, jangan di compose biasa..

5. Kemudian, selanjutnya membuat tombol Spoiler/Hide. Copy tulisan di bawah ini, dan paste ke html.

<div id="spoiler">   

<div style="margin: 5px 20px 20px;">   

<div class="smallfont" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  <div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  <div style="display: none;">   

Apa Yang Mau Diisi

</div>   

</div>
</div>   

6. Untuk mengganti kata Show, pilih pada tulisan yang di copy tadi, tulisan show, gantilah dengan yang kalian mau, misal pembahasan

7. Untuk mengisi solusi, tulisan berwarna merah, "Apa Yang Mau Diisi" Silahkan di ganti dengan yang mau kita isi.

8. Jika sudah selesai, silahkan tekan simpan, dan postingan anda akan memiliki tombol spoiler/hide.

Semoga bermanfaat.

Bisa dilihat tutorial via video dibawah ini:

Share this post