Cara Pasang Spoiler

Diposting oleh Mumun | 11.03


Kes kali ini akan saya bahas dengan ringkas cara memaikai spoiler atau memasang spoiler gambar atau video di postingan blogspot. 

Cara yang pertama ini di pakai untuk SPOILER versi Embed video atau HTML gambar

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</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>




Untuk panduan :
Tulisan yang bercetak merah paling atas Judul itu di ganti dengan sesuka elho...
dan selanjutnya isi spoiler itu di ganti dengan embed video atau html gambar anda....


Cara yang selanjutnya yang kedua ini agak berlainan alias ngak sama:
yang model ke 2 ini di pakai untuk spoiler URL gambar yang sudah di uploud
atau berisi video dengan dengan cara memakai embed video.


<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
isi spoiler
</span></div></div></div></div></div>








Catatan:

ganti tulisan yang berwarna merah (isi spoiler) dengan url gambar
atau embed video.....

Demo:

Orang ganteng
Photobucket

Video

Itu aja om selamat mencuba.....................

Relate Post:


Labels:





0 komentar

Posting Komentar

Terima kaseh

Photobucket Photobucket Photobucket