Membuat Efek Zoom Image Menggunakan jQuery


Assalamuallaikum Sobat, alhamdulillah kali ini aku ada sebuah tutorial yang bagus untuk di coba di blog sobat, yang aku dapatkan dari sebuah blog luar negeri yaitu www.bloggerplugins.org , Sebuah blog terkadang perlu diberi sedikit efek-efek javascript agar blog bisa terlihat lebih hidup dan tidak membosankan. Tetapi terlalu banyak kode javascript juga bisa membuat blog Sobat menjadi berat. Oleh karena itu, efek-efek yang diberikan pada blog harus pilih-pilih juga tanpa menghilangkan sisi estetikanya.

Memang Tutorial ini banyak di pergunakan oleh Para blogger yang blognya banyak menampilkan foto - foto, tetapi kita juga bisa menggunakannya pada semua Blog untuk memberikan kesan uniknya di blog kita.

Apa sih Image Zoom jQuery? ini merupakan sebuah plug-in javascrift yang bakalan memberi efek pada gambar yang ada di blog Sobat. Efek ini akan terlihat ketika gambar diklik kemudian setelah di klik gambar akan diperbesar sesuai ukuran Originalnya.

Bagaimana Sih membuatnya? apakah Susah? Cara membuatnya cukup mudah sobat, yang harus kita miliki adalah usaha dan kerja keras untuk membuatnya. hehe

Tidak usah berpanjang Lebar, mari kita membuatnya yuk Sobat. Ikuti saja tutorial yang aku berikan di bawah ini.

Tahap Pertama
1. Login » Blogger
2. Rancangan » Edit HTML
3. Kemudian Sobat cari kode berikut. CTRL + F
]]></b:skin>
4. Jika Sudah mendapatkannya, Kemudian letakan kode di bawah ini tepat di atas kode ]]></b:skin>
/* JQUERY IMAGE */
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://dl.dropbox.com/u/10521069/Codelain-file/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Tahap Kedua
1. Pada tahap ini kita akan berpindah ke bagian penaruhan Javascriftnya, Silakan Sobat cari kode </head>
2. Kemudian Letakkan kode di bawah ini tepat di atas kode  </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://codelain-blogger-namanya.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
 jQuery(document.body).imageZoom();
</script> 

Tahap Akhir
Jika tahap tahap di atas sudah selesai di ikuti kemudian klik SAVE TEMPLATE

Alhamdulillah, sudah selesai pembuatan Image Zoom Menggunakan jQuery nya, untuk itu silakan Sobat coba sendiri di Blog sobat. Semoga Berhasil.

12 Responses to "Membuat Efek Zoom Image Menggunakan jQuery"

  1. Kunjungan silaturahmi malam sahabat di codelain...
    Setelah bersilaturahmi dan alhamdulillah mendapatkan ilmu kembali di sini...Terima kasih sahabat atas berbagi tutorial dan pengetahuannya

    ReplyDelete
  2. Kunjuungan tengah malam sob...Menarik efeknya...nanti tak coba sob

    ReplyDelete
  3. @Webmdmk : Sama-sama sob.. makasih atas kunjungannya dan komentarnya.

    @tamannya-hati : Silakan di coba saja :D

    ReplyDelete
  4. mantap tutorialnya.. bisa aja mas nya :)
    saya bingung kalau mau pake yang aneh aneh :(

    ReplyDelete
  5. @Merliza:
    Gk wajib d coba, bagi yang ingin mencoba silakan di coba... hehe

    ReplyDelete
  6. wah mantab gan informasi bgt :) thanks yah gan atas informasinya ane jd pintar :) thanks sob

    http://bisnisstylemagazine.blogspot.com/

    ReplyDelete
  7. Sudah di praktek sob,dan hasilnya apik,ditunggu komen backnya

    ReplyDelete
  8. untuk wordpress apa bisa juga gan?:D

    ReplyDelete
  9. trik menarik nih..
    tengkyu gan..

    ijin save codenya dl..

    ReplyDelete
  10. @DulduLization:

    Silakan sob, mkasi atas kunjungannya dan komentarnnya

    ReplyDelete
  11. Thank infonya gan ane ijin copas scriptnya n semuanya berjalan dg lancar!!!

    ReplyDelete