Cách tạo hiệu ứng bóng mờ - Fade Effect bằng jQuery cho Blogger

Cách tạo hiệu ứng bóng mờ - Fade Effect bằng jQuery cho Blogger

Fairstar | 24-02-2011 | nhận xét

Đây là tiện ích tạo hiệu ứng mờ đi hình ảnh khi bạn đưa (chỉ) chuột vào vị trí hình ảnh hiện hành tạo ra hiệu ứng chuyên nghiệp làm cho Blogger của bạn hấp dân hơn (Có lẽ vậy). Cách này giúp bạn tạo hiệu ứng bóng mờ cho ảnh hoàn toàn tự động. Bạn sẽ không phải mất công nghồi chèn thủ công cho từng ảnh như cách

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

   4- Thêm đoạn code sau vào trước thẻ  </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>      
<script type='text/javascript'>       
$(document).ready(function(){       
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads       
$(".post img").hover(function(){       
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover       
},function(){       
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout       
});       
});       
</script>       
<script type='text/javascript'>       
$(document).ready(function(){       
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads       
$(".latest_img").hover(function(){       
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover       
},function(){       
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout       
});       
});       
</script>

   4- Lưu mẫu lại và kiểm tra kết quả nha.
Chúc thành công!