"Một số hiệu ứng đẹp mắt cho hình ảnh trên Blogspot bằng JQuery"

(Traidatmui.com) – Bài viết hôm nay mình xin chia sẻ cùng các bạn code để có thể giúp các bạn tạo một số hiệu ứng cho hình ảnh trên blog rất dễ dàng. Ở đây chúng ta sử dụng JQuery để tạo một số hiệu ứng như shuffle, fade, zoom, turndown... Mỗi hiệu ứng thì có cách trình diễn khác nhau và nét đặc biệt riêng, bạn có thể ứng dụng các hiệu ứng này để đặt quảng cáo hay trình diễn ảnh trên blog của mình.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.cycle.all.min.2.73.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.imgslide').cycle({
fx: 'shuffle', //tên hiệu ứng
pause: 1,
});});
</script>

Ở trên là chúng ta sử dụng hiệu ứng shuffle cho ảnh, ngoài hiệu ứng trên bạn cũng có thể sử dụng một số hiệu ứng khác bằng cách thay shuffle ở trong code thành một số hiệu ứng như: zoom, fade, turnDown, turnUp, turnLeft, turnRight, curtainX, scrollRight, blindX, blindY, blindZ, cover, curtainX, curtainY, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, slideX, slideY, toss, uncover, wipe. Bạn có thể thay thế lần lượt để xem hiệu ứng của nó và chọn hiệu ứng ưng ý.

5. Save template lại

Bây giờ để gắn hiệu ứng này vào ảnh thì bạn hãy đặt ảnh vào trong thẻ DIV như bên dưới.
<div class="imgslide">
<a href="http://www.traidatmui.com/"><img src="https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9_rXdIT0I/AAAAAAAAATk/XRL4gOL2_CM/back.png" width="586" height="162" alt="" /></a>
<a href="http://www.traidatmui.com"><img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/Tc9_oM3jxCI/AAAAAAAAATg/w02aBBZbjRI/sli.png" width="586" height="162" alt="" /></a>

</div>

Như vậy là bạn đã có một số hiệu ứng khá đẹp mắt cho hình ảnh trên blog

Chúc bạn thành công.

Tham khảo jquery.malsup.com

Xem khác cùng chủ đề

2 nhận xét | Viết lời bình

6/13/2011 06:02:00 SA Trả lời

em làm không được bác ơi, mấy thủ thuật blog bác đẹp nhưng mà khó làm quá

Admin
6/13/2011 07:04:00 CH Trả lời

Bạn làm thế nào mà không được nhỉ?Bạn phải cẩn thận, chỉ cần sai xót nhỏ thôi là nó không thể hoạt động rồi

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang