Membuat Spoiler Pada Postingan Blog

Spoiler merupakan salah satu alternatif bagi kita untuk menghemat ruang ketika menampilkan konten di dalam isi postingan blog kita. Selain mempunyai fungsi untuk menghemat ruang, spoiler juga sanggup dipakai untuk mempercantik tampilan isi postingan blog dengan gaya yang terbilang cukup keren, alasannya ialah dengan spoiler ini konten yang ditampilkan sanggup dibuka tutup sesuai harapan kita yang membuatnya tampil lebih elegan.

Bagiamana cara menampilkannya?

Cara untuk menampilkan spoiler di dalam isi postingan blog kita ini ialah dengan memakai kode HTML dalam menulis sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div></div>

Pertama, masuk ke akun blogger kita masing-masing.
Pada ketika kita ingin menciptakan postingan blog, jangan pilih compose tetapi pilih lah edit HTML.
Masukan instruksi HTML untuk menampilkan spoiler di atas.
Klik terbitkan dan selesai.
Wah, gampang bukan? <div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Briptu Norman ialah seorang anggota Brimob di Gorontalo kini sedang tenar di dunia maya alasannya ialah videonya yang beredar di situs mengembangkan youtube mengundang perhatian para pengguna internet.
Selain mendapat ketenaran, kini Briptu Norman juga telah mendapat proteksi dari pengguna jejaring sosial di dunia maya semoga beliau tidak dikenakan hukuman oleh atasannya, ulahnya yang sedang bernanyi lagu india secara lypsinc ketika sedang bertugas.

Bukan cuma orang biasa yang memperlihatkan proteksi kepada Briptu Norman. Namun beliau juga didukung oleh kalangan artis dan salah satunya ialah Glenn Fredly. Siapapun yg ngaku penyanyi & Lipsync mulai sekarang, kalo tidak lebih keren dr #Briptu Norman lebih baik ditindak aparat..sekian," tulis Glenn Fredly dalam akun Twitter-nya.
https://sakram.site//search?q=kode
</div></div></div></div>

Contoh untuk Menampilkan Gambar dengan Spoiler.

Maka instruksi HTML untuk menampilkan spoiler di atas ialah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

<a href=”URL”><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVD1UzuCQp2GL6_8sjrkv3s-Awcxwc_C2cvnQRysU99lvxDQ7cvqr4y37NNvgk9RdJ4JtBPhN6_-Pn9ZtoFfF4tXvBdaPpxco02pS3syKa7_FU6i2ZJot7hPfi6P_yU9PMYglheP6Ptaij/s1600/Briptu+Norman.jpg”></a>

</div></div></div></div>

Contoh untuk Menampilkan Video dengan Spoiler.

Maka instruksi HTML untuk menampilkan spoiler di atas ialah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

<embed autostart=”true” src=”http://www.youtube.com/watch?v=jsVW-XO9nuY&feature=player_detailpage” hidden=”true”></embed>

</div></div></div></div>

Keterangan:

Untuk menampilkan gambar dan video memakai tampilan spoiler, gunakan URL gambar dan video tersebut yang lalu dikemas sebagai berikut.

1. Untuk gambar,
   <a href=”URL”><img src=” URL Gambar ”></a>
   .
2. Untuk video,
   <embed autostart=”true” src=” URL Video ” hidden=”true”></embed>
   .

Praktis bukan?
Ada yang sudah pernah mencobanya? Ada yang sudah berhasil mencobanya?
Jika ada pertanyaan dan tanggapan, silakan di sampaikan lewat kotak komentar di bawah ini ya kawan.
Salam blogger!