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

Rất dễ dàng để bạn tạo hiệu ứng bóng mờ – Fade Effect bằng jQuery cho Blogger với công đoạn thực hiện nhanh chóng. Đâ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).

Bạn có thể xem  DEMO để hình dung dễ hơn tiện ích này.

Cách thực hiện như sau:

Đăng nhập vào Blogger và tìm vị trí chèn Code:

- Bạn đăng nhập vào Blogger:  Bảng điều khiển (Dashboard)  >> Thiết kế (Design)  >>  Chỉnh sửa HTML (Edit HTML)
- Tìm (Ctrl-F) đoạn mã </head>.

Chèn mã JavaScript tạo hiệu ứng:

- Thay thế đoạn mã </head>bằng đoạn mã dưới đây :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<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>
</head>

- Lưu lại mẫu để hoàn thành công việc.