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


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.

6 komentar:

  1. mantabs sobat, keren nih spoilernya sobat...

    BalasHapus
    Balasan
    1. Ahh..Sobat Asis Sugianto kan gak asing Lagi ama Spoiler ini,

      ini Mah tips Utk Blogger Pemula aja..

      Bagi2 Tips.. :)

      Hapus
  2. ini nehh yg ane cari. Makasih bnyak ya :)

    BalasHapus
  3. mantab sob....ni yg lgi ane cri2. makc ya sob :)

    BalasHapus
    Balasan
    1. sma-sma,,,ambilah jka itu bermanfaat buat sobat

      Hapus

Silahkan Anda Berkomentar Dengan Baik dan Sopan.

~Pesan Komentar Yang Menyertakan Link Hidup,SPAM,JUNK ,dan sejenisnya ,akan Saya Hapus Dari Postingan ini.

~Bagi Yang Meng-Follow Blog Ini,Jangan Lupa Dikonfirmasi Agar Saya Bisa Meng-Follow sobat kembali

~Maaf juga jika saya sering kali tidak membalas komentar dari Anda

Komentar Anda sangat bermanfaat untuk perkembangan blog ini. Terima Kasih!!!

Diberdayakan oleh Blogger.