Ultra Zoom Image
Cara pemasangan
1.Login ke blogger dashboard-->Design-->Edit HTML
2.Semasa di Edit HTML
Pastekan kod di bawah ni sebelum/di atas kod ]]></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;
}
3.Masih lagi di Edit HTML
Paste pula kod ni sebelum/di atas kod </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
4.Save template
Cara pemasangan kod semasa di edit pos,adalah lebih kurang seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="http://4.bp.blogspot.com/-6_UxlKsuf0o/TiEHwS4TURI/AAAAAAAAAEk/pPYwUQlU1Gk/s1600/nature_377.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="http://4.bp.blogspot.com/-6_UxlKsuf0o/TiEHwS4TURI/AAAAAAAAAEk/pPYwUQlU1Gk/s1600/nature_377.jpg" /></a></div>
Kod hijau adalah menyatakan kelas zoom
Kod merah adalah kod gambar
*Gambar yang sesuai digunakan untuk efek ni adalah gambar yang bersaiz besar
Tips:Untuk memudahkan pencarian kod di edit html,tekan Ctrl dan F untuk mengaktifkan Find,dan pastekan kod yang perlu dicari.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.