Membuat efek image zoom menggunakan jquery

Postingan kali ini adalah mengenai tutorial blog tutorial dimana membuat tampilan blog sedikit wah. Membuat efek image zoom menggunakan jquery bagi yang belum tahu silahkan klik gambar disamping.

Kebanyakan para blogger newbie sangat antusias mendesain blognya agar tampilanya begitu bagus, berbagai cara untuk mendesain blog banyak dilakukan seperti memperbanyak widget, memperbanyak efek, dan masih banyak lagi.

Cara kerja dari efek image zoom ini adalah ketika pengunjung melakukan klik, entah itu klik kanan atau klik kiri pada gambar postingan kita, maka gambar tersebut akan ada efek membesar. Dan selain itu juga di bagian kiri atas ada simbol x dimana simbol yang sudah tak asing lagi bagi kita yaitu simbol untuk close.

Langsung saja untuk caranya ikuti perintah dibawah ini untuk membuatnya:

1. Login ke akun blogger anda
2. Kemudian klik rancangan
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin> (Untuk lebih cepatnya lakukan Ctrl+F lalu ketikkan ]]></b:skin>)
5. Setelah ketemu kode diatas copykan kode CSS dibawah ini sebelum kode ]]></b:skin>
   

   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. Setelah itu anda cari kode lagi yaitu kode </head>
7. Setelah menumakanya copykan kode dibawah ini diatas kode </head>

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/> <script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/> <script type="text/javascript"> jQuery(document.body).imageZoom();</script> 

8. Yang terakhir save template anda dan lihat hasilnya.

Mudah-mudahan postingan kali ini bisa bermanfaat, terima kasih.

Sumber dari JeritanBlog.