Memasang JQuery Image Zoom Pada Blogger



Tutorial kali ini untuk memasang fungsi image zoom effect yang menarik untuk blogspot anda. nak demo? cuba halakan mouse anda pada imej di bawah.


Teruja? Fungsi ini membenarkan orang lain melihat imej dengan lebih terperinci walaupun imej tersebut pada skala kecil dengan tanpa klik imej tersebut.

Secara amnya. Untuk memastikan zoom tersebut berfungsi, pastikan imej sebenar mempunyai resolusi yang besar seperti 600x400 dan keatas.

Memasang CSS & Script

Step 1:
- Pergi ke Blogger Dashboard > Design > Edit HTML (untuk interface blogger lama)
- Pergi ke Template > Edit HTML > Proceed (untuk interface blogger baru)

Step 2: Tekan CTRL + F dan cari code ini:-

]]></b:skin>

Step 3: Copy & paste code bawah ini diatas ]]></b:skin>.

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
Note: Tukar nilai peratus pada left:50%; sehingga jarak size imej asal dengan zoom imej bersesuaian dengan template anda.

Contoh:


Step 4: Tekan CTRL + F dan cari code ini:-

</head>

Step 5: Copy & paste code bawah ini di atas </head>.

Note: Code warna hijau membuatkan JQuery berfungsi. Jika anda sudah install, biarkan saja.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>
Contoh:


Step 6: Save template.

Memasukkan Imej Pada Post
Apabila kita upload imej resolusi yang besar, mesti anda akan resize kan supaya size imej sesuai dengan template blog anda. Kalau setkan imej kepada small, medium atau large, ianya masih boleh dapat zoom pada size asal. Untuk aktifkan fungsi zoom cuma selitkan code class="zoom" pada imej anda seperti di bawah.




We Appreciate Your Comments

2 Respones to "Memasang JQuery Image Zoom Pada Blogger"

shafiq zainal said...

terbaik nie...

thanks....


April 22, 2012 at 9:32 PM
XLAWS said...

memang pun. sama-sama shafiq.


April 22, 2012 at 10:29 PM

Post a Comment

Blog Fansub XLAWS

J-Rock | J-Pop | Visual-Kei Fansub
 
Return to top of page Copyright © 2011 | Platinum Theme Edited By XLAWS