Memberi Efek Zoom Pada Image Dengan Jquery

Gambar adalah bagian penting pada artikel. Fungsi utama gambar sebagai alat untuk membantu dan memudahkan penjelasan pada artikel. Biasanya gambar yang kita posting, ukurannya akan secara otomatis mengecil menyesuaikan ukuran post body. Gambar bawaan standart bila diklik biasanya akan diarahkan kehalaman
baru, tentu ini jadi sedikit kendala. Solusinya anda dapat menerapkan cara berikut yaitu "Memberi Efek Zoom Pada Image Dengan Jquery" (baca juga Cara Menambahkan Efek Blur Pada Gambar), artinya bila gambar tersebut diklik maka gambar akan membesar tanpa membuka tab baru, disamping itu kelebihan lainnya daftar gambar dalam satu post akan dimunculkan.

Cara Memberi Efek Zoom Pada Image Dengan Jquery

1. Login ke akun Blogger anda.
2. Pilih Template dan klik Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan pencarian kode)
4. Letakkan kode CSS di bawah berikut, kemudian paste sebelum/di atas 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;
    }

Kemudian cari kode </head> ,letakkan kode di bawah berikut di atasnya

    <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>

Save Template, silahkan anda coba klik satu gambar pada post anda. Anda akan melihat hasil Efek Zoom Pada Gambar Dengan Jquery.