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.

Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Memberi Efek Zoom Pada Image Dengan Jquery
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2012/04/memberi-efek-zoom-pada-image-dengan.html

Related Post

Blogspot

• Menghilangkan icon Obeng dan Tang diedit Blogger
• Membuat Widget Tanggalan Sendiri
• Cara Membuat dan Memasang Widget Twitter di Blogger
• Membuat Background Template Tidak Bergerak
• Tambah Like Button Facebook Hide and Show di Blog
• Tambah Like Button Facebook di Blog
• Cara Membuat Kolom Related Post (Artikel Terkait)
• Memasang Flash Game di Blogger
• Membuat Elemen Footer Multi Kolom

Blogging

• Mengembalikan Akun Twitter Yang Ditangguhkan
• Cara Cepat Meningkatkan Ranking Alexa
• Membuat Widget Tanggalan Sendiri
• Mengukur Kecepatan Loading Blog
• Cara Agar Artikel Cepat Terindeks Search Engine
• Daftar Blog Dofollow
• Membuat Text Area III (Hide and Show Atau Spoiler)
• Cara Membuat Kolom Related Post (Artikel Terkait)
• Membuat Efek Blur Pada Gambar
• Memasang Flash Game di Blogger