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ẻ ]]></b:skin> .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; }
5- Lưu Mẫu lại.
6- Bi giờ để tạo hiệu ứng cho ảnh trong khi viết bài bạn Check vào ô HTML và chèn ảnh theo cấu trúc sau:
<a href="#" class="linkopacity"><img src="URL hình ảnh" /></a>
Trong đó:
- class="linkopacity": Là dùng để gọi hàm css bên trên mình đã viết để làm mờ ảnh cần thiết. Bạn chỉ việc thêm thể này vào bất cứ hình nào bạn muốn nó mờ thôi, còn nếu không bỏ thẻ này vào thì hình vẫn bình thường.
- Dấu thăng màu đỏ # : Là link liên kết mà khi Click vào hình sẽ tới trang web mà bạn muốn.
- URL hình ảnh : Là link ảnh, ảnh này chỉ hiện rõ khi bạn dê chuột vào.
<a href="http://namkna.blogspot.com/" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4eE5ugIvsU_p3UFb50d79IxJ-s6maWfHgVoRQO4ailFcqCBy3wj8vSx_pICCOShYCcrfflviaW1ggt1_PJfny2-byfkRnTAj0DbDQ6U40xBqUChxJjMwlOswVroEwTgSb590-FII0NZwL/s1600/tao-anh-mo-cho-blogspot-namkna-ngcotra.jpg" /></a>
Ngoài ra ở bước 1 bạn có thể dùng Code code bên bưới để tạo hiệu ứng ảnh mờ dần đi.
Demo:.img {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
Chúc các bạn thành công!
