Hiệu ứng cho Avatar của Friendlist Module !!!

Chắc các bạn vào blog mình cũng thấy các đường viền bao quanh mỗi avatar trong danh sách friendlist của mình nhỉ ? Vậy các bạn có muốn làm giống vậy không ??
Nếu muốn thì chúng ta cùng làm nhé :

Sau đây là cách thực hiện :

1> Thêm viền cho mỗi avatar :

Rất đơn giản, các bạn chỉ việc thêm đọan Code này vào nhé :

Code:
#friendlist_module .rc_bd .rc_bc .hd{height:auto;}
#friendlist_module .rc_bd .rc_bc .bd ul li{border-top:2px dotted #fff;border-right:2px dotted #fff;border-left:2px dotted #fff;}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{border-top:2px dotted #;border-right:2px dotted #;border-left:2px dotted #;}

Chú ý :

* #fff là mã màu trắng, # là màu đen, các bạn có thể thay đổi cho phù hợp với theme của mình nhé . Nếu không biết cách chọn mã màu có thể tham khảo Software này nhé !
* #friendlist_module .rc_bd .rc_bc .bd ul li là thuộc tính của viền lúc ban đầu
* #friendlist_module .rc_bd .rc_bc .bd ul li:hover là thuộc tính của viền khi rê chuột vào.

2> Thêm ảnh nền cho các avatar :

Các bạn thay link ảnh nền vào nhé :

Code:
#friendlist_module .rc_bd .rc_bc .hd{height:auto;}
#friendlist_module .rc_bd .rc_bc .bd ul li{background:transparent url(Link ảnh nền);}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{background:transparent url(Link ảnh nền);}

Có thể sử dụng 2 ảnh nền khác nhau:

* Link màu xanh là ảnh ban đầu
* Link màu đỏ là ảnh xuất hiện khi rê chuột vào.

Thế thôi. Như vậy là xong cách thêm các đường viền cùng hiệu ứng khi rê chuột vào mỗi avatar trong danh sách friendlist rồi nhé ! Lưu ý, Code chỉ có hiệu quả đối với Friendlist Module thôi . Hy vọng bài viết có ích cho bạn.