Login

Tạo hiệu ứng zoom cho ảnh trong Blogger

Thông thường , khi vào các forum, các bạn đều gặp qua chức năng zoom ảnh mỗi khi người viết đăng tải ảnh có kích thước khá lớn. Chức năng này giúp người đọc nhanh chóng phóng to, thu nhỏ được hình ảnh một cách dễ dàng. Thủ thuật này khá hay, và mình sẽ giới thiệu cách tạo hiệu ứng zoom này cho Blogger nhờ file JS có tên FancyZoom. Mời các bạn xem qua.

1. Đầu tiên, các bạn đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng mẫu tiện ích)
2. Thêm đoạn code bên dưới vào ngay bên trên thẻ </head>
<script src='http://boyprodx.110mb.com/ZoomImage.js' type='text/javascript'/>
<script src='http://boyprodx.110mb.com/ZoomImageinHTML.js' type='text/javascript'/>
3. Sau đó, kéo xuống khoảng dưới, xóa thẻ <body> và thay thế bằng code
<body onload="setupZoom()">
4. Save lại template .

Vậy là bạn đã thiết lập được tính năng zoom cho Blogger rồi đấy. Tuy nhiên, để dùng được tính năng này, thì kể từ giờ , bạn không dùng thẻ <img src="Link hình" /> để chèn hình nữa, mà phải dùng code sau :
<a href="Link hình"><img src="Link hình" width="300" height="200" border="0" /></a>
Lưu ý :
Link hình phải có đuôi mở rộng như .jpg , .png, .gif ...
Width : độ dài thumbnail của ảnh.
Height : chiều cao thumbnail của ảnh.

Ví dụ như :<a href="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_New_2009.png"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_New_2009.png" height="200" width="300" border="0" /></a>

P/s : Mình đã giới thiệu xong thủ thuật tạo hiệu ứng zoom cho ảnh rồi. Nếu bạn có thắc mắc, ý kiến, hãy gửi comment cho mình nhé. Mình sẽ trả lời trong thời gian nhanh nhất. Thân chào !

 
blogcongnghe © 2012 | Thiết kế bởi Tâm Nguyên