TIỆN ÍCH ZOOM ẢNH TRONG BÀI VIẾT KIỂU 2
10/27/12

Chèn code vào HTML
- Vào blogger > Mẫu > Chỉnh sửa HTML
- Dán code bên dưới vào trước thẻ ]]></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;
}
- Tìm thẻ đóng </head> và dán trước nó đoạn code sau và Lưu lại
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>Nếu template của bạn đã có jQuery rồi thì xóa đoạn code được bôi màu xanh bên trên đi
<script src='http://trollfile.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
Thêm ảnh với hiệu ứng zoom vào bài viết
- Bạn sử dụng code sau để thêm ảnh có hiệu ứng zoon này vào bài viết
<div class="separator" style="clear: both; text-align: center;">Trong đó đoạn code được bôi màu vàng là link của hình ảnh và màu xanh là chiều rộng và chiều cao của ảnh hiện thị trên bài viết
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3prDrgrWyHgFzsSV6oylrpumaiHGd9dy7MjBynPLlQgdQqfXL0Uj15v3a5sFQ9ImEZ-OiXcizKG_CP03PXsIroXDQwdOTcyMm8k13spEk933Ln446_WhAsVIM9QHzLujnuMKfGjSbPi9r/s1600/05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3prDrgrWyHgFzsSV6oylrpumaiHGd9dy7MjBynPLlQgdQqfXL0Uj15v3a5sFQ9ImEZ-OiXcizKG_CP03PXsIroXDQwdOTcyMm8k13spEk933Ln446_WhAsVIM9QHzLujnuMKfGjSbPi9r/s1600/05.png" width="300" /></a></div>
Bạn cảm thấy hiệu ứng này thế nào? Hãy comments cùng thảo luận nhé!
Tin liên quan
XEM TRÊN MOBILE
No comments:
Post a Comment