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. 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://boyprodx.blogspot.com"><img src="http://img24.imageshack.us/img24/1162/banner2009sa2.jpg" /></a>

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

16 Nhận xét on "Tạo hiệu ứng mờ cho ảnh trong Blogger"

NAD on 13 April 2009 at 10:49 said...

Hay quá, mình sẽ thử xem sao. Thanks.

NAD on 13 April 2009 at 11:04 said...

Đã thực hiện thành công. Cảm ơn lần nữa nha :D

NAD on 13 April 2009 at 11:34 said...

Hic, ko hỉu sao mình áp dụng vào blog mình, xem tốt trên FF, nhưng ko ngon trên IE :|

Benjami Tennyson on 13 April 2009 at 19:13 said...

Bên IE, lúc NAD mở trang test của mình đưa bên trên, nó sẽ hỏi có muốn kích hoạt cái ActiveX gì đó. Chọn kích hoạt thì hiệu ứng mờ sẽ chạy được. Have fun :D

NAD on 13 April 2009 at 19:17 said...

Ko, vào trang test của bạn = IE chẳng phải kích hoạt j cả nhưng hiệu ứng vẫn hoạt động. Trang mình thì ko :(

vuluganck on 13 April 2009 at 21:26 said...

Bạn ơi , cho mình hỏi dịch vụ image host Flirkr.Nó có ghi "You've used 0% of your 100 MB photo limit and 0 of your 2 video limit this month"
có nghĩa là sao hả bạn? nghĩa là sau 1 tháng thì nó sẽ reset hết tất cả memory của account mình? hay là cứ mỗi tháng nó cho mình thêm 100 MB nữa ? mình ko hiểu lắm

Ngankvn ® on 14 April 2009 at 09:24 said...

Đã thử nghiệm , chạy đẹp trên FF và IE 7 Thank :x
Nhưng chưa nghĩ ra sẽ dùng để làm gì !!

Benjami Tennyson on 14 April 2009 at 19:44 said...

@NAD : Mình cũng chẳng hiểu nữa, bên trang test chạy ngon ơ mà đưa vào blog lại cà giựt, chán cái IE6 quá. Lỗi ko tương thích do trình duyệt thì mình cũng chịu thua rồi :D

@vuluganck : Đúng rồi đó bạn, cứ 1 tháng thì nó sẽ cho mình 100MB khác, chứ ko phải cứ xong 1 tháng là nó sẽ del hết hình ảnh, video của mình đâu. Flickr mà reset như thế này thì ai dám dùng :D

@Ngankvn ® : Ko có chi, mà blog Ngân ngoài truyện thì toàn bộ nội dung khác đều là text ko, nên chắc thủ thuật này Ngân ko dùng đến quá :D

NAD on 14 April 2009 at 21:27 said...

IE7 cũng bị. Chắc chịu rồi, thanks :D. Chờ những thủ thuật hay tiếp theo của bạn :D

Kim Trần Co., Ltd on 14 April 2009 at 23:41 said...

Phải nói hay

Benjami Tennyson on 15 April 2009 at 18:17 said...

@NAD : Chờ ngày Firefox hạ bệ IE rồi chúng ta tha hồ mà dùng css :D

@Kim Trần: Thanks bạn ^^!

NAD on 15 April 2009 at 21:32 said...

Khi nào Window se7en chính thức ra đời sẽ là lúc bắt đầu khai tử IE6 :(

Benjami Tennyson on 16 April 2009 at 00:33 said...

Chỉ sợ mọi người còn luyến tiếc XP , thế thì IE6 vẫn còn sống :|

vuluganck on 16 April 2009 at 05:31 said...

chào bạn, hôm nay mình xin hỏi bạn cách làm phần post body chia làm 2 cột hỗ trợ thumbnail , giống như trang này : btemplates.com
hy vọng bạn biết thủ thuật này
cám ơn bạn

Benjami Tennyson on 17 April 2009 at 18:39 said...

@vuluganck : Hì, mình vẫn chưa rành về HTML lắm , nên tạm thời chưa thể hướng dẫn được cho bạn ^^!
Bạn có thể tìm template có dạng thumbnail (mình đã thấy qua nhưng ko nhớ tên của template này) và xem mã nguồn của nó để từ đó chỉnh sửa lại cho phù hợp . Thân :D

vuluganck on 23 April 2009 at 05:11 said...
This comment has been removed by the author.
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3