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

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.

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://f69dkm.blogspot.com/"><img src="http://datacafe82.googlecode.com/files/add_0984946725.png" /></a>
Gửi bài viết này cho bạn bè qua Y!M: » Tạo hiệu ứng mờ cho ảnh trong Blogger : http://f69dkm.blogspot.com/2011/12/tao-hieu-ung-mo-cho-anh-trong-blogger.html