3 Cara Membuat Spoiler Button di Blogspot

Kali ini saya akan berbagi tutorial bagaimana caranya membuat dan memasang serta menampilkan spoiler button di blogger. Spoiler ini bentuknya seperti yang sering sobat lihat di Kaskus. Spoiler yang akan kita buat ini pun, bisa untuk teks, gambar dan video.

Contoh spoiler button di blogger:

Cara Membuat Spoiler Button di Blogspot

Beralih terlebih dahulu ke ke mode tampilan HTML pada postingan, selanjutnya pilih salah satu di antara ketiga di bawah ini.

Spoiler button dengan teks:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;">Arief Ghozaly hanyalah blogger biasa lulusan Teknik Komputer dan Jaringan di SMK.</div> </div> </div>

Hasilnya:

Spoiler button dengan gambar:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMnfzjQCHjqNOJ6x3p6fZnkAeR3zSIb1yCk-wX0iuo5njS8h0ggevoFPEiZ548nEA4g4Jl1r9y4pxURDgBPA1vdHFFlwPCg2Bl-hq07i_BPEAmu0SLsUlV2sMQ0S5PjmjPK6Wv8q7jC100nC1EbMBDSlmbPusGWkQ3gAUdcgEcIUqGuNudmqinUeks5g/s2048/Hi-Arief-Ghozaly-di-Sini.jpg?ig_cache_key=ODc3MTk2MDAzMTkyMTE4NTE5.2" alt="Arief Ghozaly" width="100%" height="100%" /></div> </div> </div>

Hasilnya:

Spoiler button dengan video:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/lXGp8LPSSsU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> </div> </div>

Hasilnya:

Cara embed video youtube untuk postingan blog, seperti ini:

1. Buka video youtube yang diinginkan, klik tombol bagikan.

2. Klik menu sematkan.