Cara Membuat Efek Zoom Gambar di Blog

Cara membuat efek zoom gambar pada blogspot. Efek zoom merupakan efek yang akan meyebabkan gambar pada blogspot membesar pada saat kursor memilih/di arahkan pada gambar yang ada didalam konten blogspot. 

Efek ini sangat menarik untuk ditampilkan pada blog. Untuk lebih jelasnya bisa sobat lihat gambar di samping artikel ini, lalu arahkan cursor mouse pada gambar disamping. makan akan keluar Efek Zoom/Gambar Membesar.

Efek Zoom pada gambar sangatlah menarik, keutungannya bila terdapat gambar pada blog agak kecil, akan bisa di preview agar lebih jelas dengan menggunakan efek ini. Nah, bagi  teman - teman yang tertarik untuk mencobanya silahkan ikuti trik dibawah ini :

Langkahnya adalah sebagai berikut : 

Cara 1 :
1. Login Ke Blogger
2. Klik Template >> Edit HTML.
3. Centeng Expand Widget Template.
4. Tekan CTRL F dan cari ]]></b:skin, 

5. KKalau sudah ketemu letakkan kode berikut diatas kode ]]></b:skin

 .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

6. Klik Pratinjau dulu sebelum menyimpan, jika gak ada masalah, Simpan Template.
7. Lihat Hasilnya


Cara 2 :
1. Login dulu ke blogger anda
2. Kemudian klik Rancangan 
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin>
5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas

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://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/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;
}

6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.

<script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
<script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom(); 
</script>  

7. Yang terakhir Save Template anda. Dan selesai..


Catatan : 
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. 


Selamat Mencoba..!