Tạo hiệu ứng mờ cho ảnh trong Blogger BlogSpot

Nếu các bạn hay dạo web nhiều, chắc hẳn sẽ không ít lần bạn gặp trường hợp web/blog có hiệu ứng gây mờ (opacity) cho ảnh , chỉ khi rê chuột đến thì ảnh mới hiện màu nguyên thủy. Đây là một thủ thuật rất đơn giản, chỉ cần thêm 1 đoạn code css nhỏ dưới đây là bạn có thể làm được. Trước hết, mời các bạn xem mẫu hiệu ứng tại đây.

Sau khi đã xem qua một số hình mẫu, chúng ta bắt đầu thực hiện thủ thuật nhé :

1. Đầu tiên, bạn đăng nhập Blogger >> Layout >> Edit HTML.
2. Tiếp theo, bạn tìm đến thẻ </head> và thêm ngay bên trên đoạn code này vào:

<!--LINK-OPACITY-STARTS-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
<!--LINK-OPACITY-STOPS-->

3. Sau khi đã thêm xong, bạn save lại template. Vậy là bạn đã hiệu chỉnh xong cho Blog có thêm hiệu ứng mờ khi chèn ảnh rồi đấy.

Lưu ý

Kể từ giờ, mỗi khi chèn ảnh vào Blog , bạn sẽ dùng code sau (phải có đoạn code bôi đen nhé!)

<a class="linkopacity" href="URL tùy chỉnh"><img src="Link ảnh" /></a>

chẳng hạn như :

<a class="linkopacity" href="http://vntim.blogspot.com"><img src="http://tuanvietnam.net/Library/Images/60/2007/12/3112sach.jpg" /></a>

Vậy là xong rồi đấy, chúc bạn thành công !