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

9:15 PM JilinTour.Com 0 Comments

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>
Theo Blog Tin Hoc