16 Julai 2011

Ultra Zoom Image

Tiada ulasan:
 

Demo

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() {
$(&#39;a.zoom&#39;).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.

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger