Info Cara

Browse Manual » Wiring » 3 » blog » gambar » hide » jenis » pada » part » show » Jenis jenis Show hide gambar pada blog part 3

---

Jenis jenis Show hide gambar pada blog part 3

1. Spoiler menu show/hide berwarna.

<div>
<div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = BUKA; }" style="background: none repeat scroll 0% 0% rgb(0, 102, 204); color: #DFE6EF; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: blue; padding: 10px; text-align: justify;">
Apa aja boleh</div>
</div>
</div>
</div>
</div>

ganti tulisan yang berwarna biru sesuai dengan keinginan sobat, bisa juga gambar
hasilnya akan nampak seperti di bawah ini.


2. Spoiler Show/hide sentuh.

<style type="text/css">
.stevevai{margin:0 auto;text-align:left;font-size:large;color:red;overflow:hidden}.rumpun{background:#fff; color:blue;font-size: 3em; font-family:arial;font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:900px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
</style>
<br />
<div class="stevevai" id="vanhalen">
Sentuh aku dong……!!<br />
<div class="rumpun">Gue keren kan???</div>
</div>

ganti tulisan yang berwarna orange sesuai dengan keinginan sobat, bisa juga gambar
hasilnya akan nampak seperti di bawah ini.


3. Spoiler menu show/hide dengan gambar.

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjyukWOpPYGynx8y4RMzkubmYZzDtOtPzBqgiIAN4KA657qG8GfzwRIpZutnuH-tKZ0lyFol4FKM1HgQH8s5FCkO0c5aqlr7AQrFgrJOkFA88iUwhcjUbIlwypTgkgME0V-mGNfFqPZ_LO/s1600/flying-bird-icon.png" /><span style="font-size: large;">lihat selanjut nya</span></b><input 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 = Close..; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = Clik Here; }" style="font-size: 10px; margin: 5px; padding: 0px; width: 80px;" type="button" value="Open!!!" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Apa aja boleh</div>
</div>
</div>
</div>

ganti tulisan yang berwarna biru sesuai dengan keinginan sobat, bisa juga gambar
dan ganti tulisan yang berwarnah merah dengan url gambar sobat.
hasilnya akan nampak seperti di bawah ini.
Selamat mencoba. Good luck .