On-Click Image Zoom Dengan jQuery

Selamat siang sobat devilz ???
sekarang saya akan membahas tentang blogger !!!
yaitu On-Click Image Zoom Dengan jQuery

kalau sobat devilz penasara !!! sobat bisa lihat SS di bawah ini !!!

baik lah kalau sobat devilz tertarik, mari kita ke TKP !!!

1. seperti biasa sobat hrs login dulu ke Mas Blogger >>> Dashboard >>>Rancangan >>> Edit HTML >>> sobat devilz centang dulu "Expand This Widget" Nya !!!

2. setelah itu sobat devilz cari kode ]]></b:skin>, udh ? masa gak ketemu ?? ya udh kalau sobat devilz gak menemukan kode nya, sobat tinggal cari menggunakan Find (pakai CTRL+F), kalau udh ketemu Masukkan kode dibawah diatas kode ]]></b:skin> tadi !!!

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghALt99JO1BnVT6EyISR_4nIw3Ccj6gPYqMnfjv2rTb6HcCa00rnUSeUVrBtvuqK9EncFSlB4xcW0ISszzsJV86wYlYXjtCo7s0NpObAS6M8tEbF98yU-C12GUeCA0tUnzop2Y6nezmB8/s1600/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; }

3. lalu sobat devilz masuk kan JavaScript di bawah ini tepat di atas kode </head>

<script src='http://lorddayz.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script src='http://lorddayz.googlecode.com/files/imageZoom.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document.body).imageZoom(); </script>

Naahhh...setelah itu save/simpan deh template sobat devilz smua !!!
semoga bermanfaat ya ???



Sumber