Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog

Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog
Sebelumnya saya sudah share cara membuat Spoiler Button. Namun kalau dilihat kurang menarik rasanya. Nggak menggigit gitu.

Barangkali masih ada yang bertanya bagaimana bentuk atau masih belum ngeh Spoiler Button itu seperti apa.

Pernah main-main ke forum Kaskus nggak? Setiap thread yang diterbitkan pasti ada tombol Show Content atau Hide Content, atau Show or Hidden.

Masih bingung dan nggak tau juga? Nih contoh Spoiler Button-nya ada dibawah:

Joko Widodo adalah Presiden Indonesia

Ok langsung saja.

Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog


Gunakan kode dibawah ini:

<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;">Joko Widodo adalah Presiden Indonesia</div> </div> </div>

Kalau mengisi Spoiler Button dengan isi gambar, gunakan kode ini:

<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://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e15/10864912_835435436537200_1140592696_n.jpg?ig_cache_key=ODc3MTk2MDAzMTkyMTE4NTE5.2" alt="Syima Eima" width="410" height="300" /></div> </div> </div>

Hasilnya seperti ini, di dukung oleh foto mantan:

Syima Eima

Kalau mau mengisi Spoiler Button dengan Video yang berasal dari Youtube, bagaimana?

Kodenya tetap sama seperti kode diatas yang telah dibagikan, namun pada tulisan yang saya warna-merahkan tersebut, hapus dan ganti (atau sisipkan) dengan kode embed video youtube. Cara membuatnya seperti berikut:

<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;">Sisipkan Video Youtube yang di Embed</div> </div> </div>

Contohnya seperti ini nih:

<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;"><div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader" data-src="disini link embed video youtube"></div></div></div></div> </div> </div>

Untuk pemasangan video youtube tersebut, silahkan simak Cara Praktis Membuat Video Youtube Responsive agar tutorialnya bekerja dengan baik, Responsive pula! Ok semoga berguna.*

Labels: Desain Blogger

Thanks for reading Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog. Please share this article.
0 Komentar untuk "Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog"

Situs sedang dalam masa pengembangan; banyak gambar yang error. Jika ada yang ingin ditanyakan, jangan ragu bertanya. OOT? Siyap!

SEO Kraken Premium Blogger Template