> Cara membuat Image Preview menggunakan jQuery

Minggu, 26 Juni 2011

5

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.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat Image Preview menggunakan jQuery"
Diulas Oleh : | Minggu, 26 Juni 2011 | 22.19
Description : Memberi efek Image Preview pada web atau blog juga diperlukan, terutama bagi web atau blog y...

Rating : 6.4 Dari 10, Berdasarkan 500+ Dari 5 000+ Pengunjung.



5 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

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down