Barangkali masih ada yang bertanya bagaimana bentuk atau masih belum ngeh Spoiler Button itu menyerupai apa.
Pernah main-main ke lembaga Kaskus nggak? Setiap thread yang diterbitkan niscaya ada tombol Show Content atau Hide Content, atau Show or Hidden.
Masih gundah dan nggak tau juga? Nih pola Spoiler Button-nya ada dibawah:
Ok eksklusif saja.
Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog
Gunakan instruksi 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 yakni Presiden Indonesia</div> </div> </div>
Kalau mengisi Spoiler Button dengan isi gambar, gunakan instruksi 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=" Namun jikalau dilihat kurang menarik rasanya Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog"color: red;">Syima Eima" width="410" height="300" /></div> </div> </div>
Hasilnya menyerupai ini, di dukung oleh foto mantan:
Kalau mau mengisi Spoiler Button dengan Video yang berasal dari Youtube, bagaimana?
Kodenya tetap sama menyerupai instruksi diatas yang telah dibagikan, namun pada goresan pena yang aku warna-merahkan tersebut, hapus dan ganti (atau sisipkan) dengan instruksi embed video youtube. Cara membuatnya menyerupai 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 menyerupai 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 Mudah Membuat Video Youtube Responsive supaya tutorialnya bekerja dengan baik, Responsive pula! Ok semoga berguna.*
0 Response to "Cara Menciptakan Spoiler Button Tulisan, Gambar & Video Di Blog"