Cara Buat Effect Zoom Image di Blogspot

Mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blogspot, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya. Jika anda berminat, ikuti langkah-langkah berikut ini;

Masuk ke blogger;

• Klik Perancangan lalu klik Edit HTML;
• Carilah kode ]]></b:skin> 
• Kemudian Click Select All dibawah ini kemudian sisipkan Code HTML tersebut tepat di atas ]]></b:skin>

/* Zoom Image www.wakrizki.net<br /> ------------------------------- */<br /> div.jquery-image-zoom {<br /> line-height: 0;<br /> font-size: 0;<br /> z-index: 10;<br /> border: 5px solid #fff;<br /> margin: -5px;<br /> -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);<br /> -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);<br /> box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);<br /> }<br /> div.jquery-image-zoom a {<br /> background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;<br /> display: block;<br /> width: 25px;<br /> height: 25px;<br /> position: absolute;<br /> left: -17px;<br /> top: -17px;<br /> /* IE-users are prolly used to close-link in right-hand corner */<br /> *left: auto;<br /> *right: -17px;<br /> text-decoration: none;<br /> text-indent: -100000px;<br /> outline: 0;<br /> z-index: 11;<br /> }<br /> div.jquery-image-zoom a:hover {<br /> background-position: left -25px;<br /> }<br /> div.jquery-image-zoom img,<br /> div.jquery-image-zoom embed,<br /> div.jquery-image-zoom object,<br /> div.jquery-image-zoom div {<br /> width: 100%;<br /> height: 100%;<br /> margin: 0;<br /> }<br />

• Selanjutnya cari kode </head>
• Kemudian Click Select All dibawah ini kemudian sisipkan Code HTML berikut ini tepat di atas </head>:

<!-- Zoom Image code script www.wakrizki.net --><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /> <script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> jQuery(document.body).imageZoom();<br /> </script>

• Langkah terakhir adalah simpan template sobat. Semoga berhasil

Reply Post: Tutorial Bertuah™