Tạo hiệu ứng bóng mờ (Fade Effect) từ jQuery cho Blogger

Fade Effect là một hiệu ứng khiến ảnh mờ đi hình ảnh khi bạn đưa (trỏ) 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. Đây thực ra là một nhánh của hiệu ứng Lazy load sử dụng thư viện Jquery.

Với cách này các hình ảnh trong blog của bạn sẽ được tích hợp hiệu ứng bóng mờ hoàn toàn tự động. Bạn sẽ không phải mất công ngồi cả tiếng đồng hồ để chèn thủ công cho từng ảnh như cách mình giới thiệu ở Bài này..

Demo for Post

☼ Tạo hiệu ứng bóng mờ (Fade Effect) khi dê chuột lên trên hình ảnh với hiệu ứng từ jQuery cho Blogger

1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML).
4- Thêm đoạn code sau vào trước thẻ  đóng </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>

» Tùy chỉnh code

• Do thủ thuật này dùng hiệu ứng từ thư viện Jquery nên nếu trong blog của bạn đã có file Jquery rồi thì hãy xóa đoạn code màu xanh đi nha.
• Đoạn màu cam 1.0 là hiệu ứng của ảnh khi bạn bắt đầu đưa chuột vào hình ảnh. hình ảnh sẽ mờ dần trong quá trình bạn dê chuột trên hình ảnh từ 100% (tức 1.0) xuống còn 50% (tức 0.5).
• Phần 0.5 là độ mờ nhất của ảnh khi bạn đưa trỏ truột lên trên hình ảnh. Phần này bạn có thể tùy chỉnh độ mờ của hình ảnh theo ý muốn của bạn (Với 1.0 là độ nét nhất và 0.1 là mờ nhất).
• Phần 1.0 màu vàng là hiệu ứng của ảnh khi bạn đưa trỏ chuột ra khỏi hình ảnh, Như trong đoạn code này thì hình ảnh đang mờ ở 50% (tức 0.5) sẽ nét lên 100% (tức 1.0) khi bạn đưa chuột ra khỏi hình ảnh.

4- Lưu mẫu lại và kiểm tra kết quả nha.

Chúc thành công!