Thứ Tư, 28 tháng 10, 2009

Thêm Hiệu Ứng Zoom Ảnh Cho Blogspot

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 thử ( tại đây )


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 : Chiều ngang 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>

Nguồn Từ Blog Tin Hoc

0 nhận xét:

Đăng nhận xét