Membuat Show/Hide gambar

-
Anda mungkin sering mendapatkan di weblog beberapa gambar pada artikelnya di sembunyikan dan apabilah kita ingin melihat gambar tersebut kita diperintahkan untuk mengklik kalimat seperti SHOW/ HIDE, OP3N/ CLOSE atau TAMPILKAN/ SEMBUNYIKAN dll. ini biasa juga disebut Spoiler. nah apabilah kita mengklik butang atau kalimat tersebut maka akan memunculkan gambar, lebih jelasnya lihat 3 contoh berikut: UNTUK CONTOH PERTAMA BELUM TERISI GAMBAR SILAHKAN KLIK CONTOH 2 DAN 3





Judul Spoiler



Nah...sudah paham kan, sekarang tinggal main KOPAS alias kopi paste

Kode Contoh Pertama

<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>


Kode Contoh Kedua

<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>


Kode Contoh Ketiga

<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>

Untuk yang warna biru dan hijauh (judul spoiler) silahkan diganti kalimatnya kalau mau
adapun warna merah tempat kode gambar atau conten anda

bisa di pahami sobat silahkan di cobah. sebenarnya sobat, suber tutorial diatas saya ambil dari http://www.gallerydunia.com

Komentar

Posting Komentar

Jika ada sembarang pertanyaan silahkan komentar disini.

Postingan populer dari blog ini

Apa Itu Navbar di Blog

-
Gambar
Perna nonton ga gombal-gembel [ Comedy Project Trans TV ] yang penuh dengan kata-kata gombal alias gembel beneran hehehe... Kata-katanya Mirip seperti ini:                            "Kamu Blogger ya ? saya heran aja kok Navbar di blog tidak tahu". kata-katanya salah ya? hahaha... Sorry sobat' saya bukan Mas Deny yang bijak merangkai kata-kata gombal. Berhubung karna saya kehabisan materi maka untuk postingan kali ini yaitu Apa Itu Navbar Blog? masih belum tahu ya apa itu Navbar blog? cobah lihat di bagian atas blog sobat, akan mendapatkan Navbar yang bentuknya seperti gambar berikut ini juga biasa disebut Navigation Bar. Apa Itu Navbar di Blog ? Navbar atau biasa disebut [ blogger Navigation Bar  ] adalah sebuah alat navigasi yang berbentuk Frame dan berisi beberapa menu dan mempunyai kegunaan masing-masing. fungsi-fungsi pada navbar blog sangat membantu kita dalam ngeblog di blogger.  sebenarnya a...
Baca selengkapnya

Cara Menghilangkan Spasi/ Jarak Header Blog

-
Bagaimana ya cara menghilangkan spaci atau jarak antara Header blog dengan Navbar blog? itulah kataku dalam hati, setelah mondar-mandir sana sini cara untuk menmghilangkan masalah tersebut akhirnya saya dapatkan. Namun apa yang terjadi setelah saya hilangkan masalah tersebut eh...ternyata menimbulkan masalah ,mau tahu apa masalahnya? setiap artikel yang saya update tidak ada yang bisa saya temukan di mesin pencari padahal biasanya setiap habis post/ update setengah hari da pada muncul di mesin pencari namun kenyataannya lain yang sekarang. bahkan pengunjung blogku sangat menurun derastis" bahkan boleh dikatakan fatal banget". dan jawaban ini saya dapatkan setelah saya utak atik WebMaster Tolls.           Jadi bagi sobat yang pengen menghilangkan Spaci/ Jarak atau kata lainnya [ Judul Blog ] Header blog silahkan dipikirkan terlebih dahulu, jangan samapai menimbulkan masalah khususnya mungkin pada mesin pencari, karena sebenarnya judul blog sangat penting dalam p...
Baca selengkapnya