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:
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:
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.*
Post A Comment:
0 comments so far,add yours
Posting Komentar