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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

2 nhận xét

  1. 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á

    Trả lờiXóa
  2. 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

    Trả lờiXóa