Cara membuat Image Preview menggunakan jQuery

Memberi efek Image Preview pada web atau blog juga diperlukan, terutama bagi web atau blog yang berhubungan dengan gambar, foto ataupun desain. Dengan menambahkan efek Image Preview, tentu sangat berguna bagi pengunjung untuk melihat koleksi gambar, foto ataupun desain secara jelas.
Cara kerja efek ini sangat bagus, kita tinggal mengarahkan pointer mouse diatas area gambar, maka akan muncul tampilan gambar tersebut dengan ukuran yang lebih besar  dan mengikuti arah pointer mouse.


Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

6. SIMPAN TEMPLATE

Langkah selanjutnya anda tinggal menambahkan kode HTML yang ada dibawah dibawah, pada saat menulis artikel. Jangan lupa tambahkan kode HTML pada bagian Edit HTML . Cara ini bila gambar akan ditampilkan pada halaman posting. 
 
Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript



4. Copy dan paste kode dibawah ini pada gadget tersebut :
  •  Berikut kode Image Preview biasa :
<table border="1">
<tbody>
<tr>
<td bgcolor="#cccccc">
<a class="preview" href="ULR GAMBAR BERUKURAN BESAR" title="TITEL GAMBAR"><img alt="gallery thumbnail" height="110" src="ULR GAMBAR BERUKURAN KECIL" width="170" /></a>
</td>
</tr>
<tr>
  <td style="text-align: center;" bgcolor="#E7E7E7"><a href="ULR ARTIKEL" target="_blank"> Read More</a>
</td>
</tr>
</tbody></table>
  •  Berikut kode Image Preview dilengkapi dengan Deskripsi artikel:
<table border="1" cellpadding="10">
<tbody>
<tr>
<td bgcolor="#cccccc">
<a class="preview" href="ULR GAMBAR BERUKURAN BESAR" title="TITEL GAMBAR"><img alt="gallery thumbnail" height="110" src="ULR GAMBAR BERUKURAN KECIL" width="170" /></a>
</td>
<td bgcolor="#E7E7E7">DESKRIPSI ARTIKEL<a href="ULR ARTIKEL" target="_blank"> Read More</a>
</td>
</tr>
<tr>
<td bgcolor="#cccccc">
<a class="preview" href="ULR GAMBAR BERUKURAN BESAR" title="TITEL GAMBAR"><img alt="gallery thumbnail" height="110" src="ULR GAMBAR BERUKURAN KECIL" width="170" /></a>
</td>
<td bgcolor="#E7E7E7">DESKRIPSI ARTIKEL <a href="ULR ARTIKEL" target="_blank">Read More</a>
</td>
</tr>
</tbody></table>
Catatam :
Silahkan anda ganti tulisan tebal berwarna merah dengan milik anda.

Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Related

Cara buat menu drop down bubble

Koleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble yaitu efek hover yang timbul berbentu...

Cara buat gallery dengan efek hover zooming

Tambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. Cara membuatnya, selain menggunakan...

Cara buat slide show Carousel

Menambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show Carousel ini juga dilengkapi descrip...

Posting Komentar

  1. waw, padahal postingannya keren lhoo, tapi kok ga ada yg comment, ckckcckk

    BalasHapus
  2. mantap artikelnya..........saya mau mencoba dulu smoga berhasil nggak error blog saya,hehe

    BalasHapus
  3. kok jadi eror knp ya mas....image slide saya jadi gak jalan...??

    BalasHapus
  4. jguery itu termaksuk program untuk pembuatan web ya...

    BalasHapus
  5. saya juga belum tau tentang jquery, mohon beri kami penjelasan lanjut

    BalasHapus
  6. wah keren juga nih sob... thank you :)

    BalasHapus

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Hot in weekRecentComments

Hot in week

Recent

Slide down random post

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil seca...

Slice Random Recent Post

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan ya...

Buat Toko Online dengan blogger tidak kalah Profesional

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.Kendati ...

Cara mengaktifkan Thread Comments blogger

Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang...

Cara Pasang Rating Bintang Rich Snippets

Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.Sebelum menuju caranya, sebaik...

Comments

Manly tours:

artikel ini beserta kode kodenya untuk di passang di website blogger ya mas keren juga mas saya kepingin tapi saya tidak menggunakan website blogger yang saya gunakan website word press, kalau begitu...

peluang usaha:

wah.. keren nih..tanks gan dah share

muhammad isra:

kalau batas waktu 10, apa tidak terlalu cepat gan....salam sukses selalu...ditunggu kunjungan balik dan kritik sarannya......

item