Posts Subscribe to This BlogComments

Follow Us


widget

make widget
Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us
Top Blogs BOOTER-CENTER - Find me on Bloggers.com
Mau Pasang Iklan Disini? Resize Banner 460X61
ads ads ads peluang usaha

Saturday, January 28, 2012

Cara sederhana Membuat SHOW/HIDE gambar pada artikel (spoiler)

Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us

SPOILER,hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,yuk mari kita coba......

1.spoiler tampilkan/sembunyikan
<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>
NB :

  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar
2.Spoiler SHOW/HIDE



<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>



NB :
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar
3.Spoiler OPEN / CLOSE



<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>




NB :
  • Huruf warna putih (judul spoiler)isa di ganti dengan kata yang lain nya.
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar




Tiga kode spoiler di atas hampir sama hanya beda di tampilan saja,nah...gimana simpelkan boleh di coba neh semoga bermamfaat.
 

Related Post



Get Traffic Like Spam
Loading...

0 Comment:

Post a Comment

Section meetings - Registered
recent entries

users online



ads ads ads ads
 

networkedblogs

B-C ON YAHOO

Trafic

Followers

MyFreeCopyright.com Registered & Protected MyFreeCopyright.com Registered & Protected