Image Zoom Window Popup Template Blogger

Berikut salah satu cara teori untuk memperbesar gambar yang tampak kecil menjadi lebih detail seperti menggunakan lensa saat kursor diarahkan pada gambar. Gambar asli tampak sebelah kiri gambar asil zoom dan ini memudahkan kita untuk melihat objek kecil yang ada dalam gambar yang belum terlihat jelas.
Silahkan lihat Demo / View Image Zoom Window Popup Template Blogger.

Berikut adalah cara pemasangan " Image Zoom Window Popup Template Blogger " di Blogger / Blogspot :
  1. Login - Layout/Tata Letak - Edit HTML - Expand Template Widget.
  2. Cari kode </head> menggunakan (Ctrl+f).
  3. Letakkan kode di bawah ini sebelum kode </head> :


    <!--Image Zoom Window Popup Template Blogger-->
    <script src="http://die-silver.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://die-silver.googlecode.com/files/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
    <link rel="stylesheet" href="http://die-silver.googlecode.com/files/jqzoom.css" type="text/css" />
    <script type="text/javascript">
    $(function() {
    var options =
    {
    zoomWidth: 275,
    zoomHeight: 275
    }
    $(".jqzoom").jqzoom(options);
    var options2 =
    {
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType:'reverse'
    }
    $(".jqzoom2").jqzoom(options2);
    });
    </script>
    <!--JQZOOM-STOPS-HELP@-http://www.ardi33.web.id/-->


  4. Simpan Template.
  • untuk setting default, ukuran gambar adalah 275x275px. Anda dapat mengubahnya sesuka hati.
  • Sekarang pemasangan agar efeknya dapat kita rasakan. Caranya menambahkan class "jqzoom" pada tag a href.
  • Untuk menggunakan " Image Zoom Window Popup Template Blogger " , tambahkan link ini :


    <a href="LINK GAMBAR YANG LEBIH BESAR" class="jqzoom" title="IMAGE TITLE"><img src="LINK GAMBAR YANG LEBIH KECIL"/></a>

Image Zoom Window Popup Template Blogger