Hiệu ứng tạo nút ấn cho blog

Thư mục: Thiết kế blog 360plus |

Đăng ngày: 20:02 18-05-2009

Trước hết mình cũng giải thích một chút về hiệu ứng nút ấn

Giải thích có lẽ rất khó hiểu bởi mình không có tài ăn nói, dùng hình ảnh cho dễ nhé.

Trước khi rê chuột

Sau khi rê chuột

Nghĩa là khi rê chuột đến module thì một phần module như "sáng" lên vậy. Tùy sở thích bạn có thể lựa chọn hiệu ứng cho từng module. Sau đây là code :

Module Bài viết mới nhất :

#article_new .rc_bd .rc_bc .bd ul li:hover{background:url (http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png);}

Module Bình luận mới nhất :

#comment_new .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Bình luận nhanh :

#guestbook_entries .rc_bd .rc_bc .bd ol li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Thư mục riêng :

#folder .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Bạn bè :

#friendlist_module .rc_bd .rc_bc .bd ul li{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/25001229299193.png );} #friendlist_module .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Hình ảnh trong blog :

#photo_highlight .rc_bd .rc_bc .bd tr td:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Blog tôi thích :

#subscribe_highlight .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Blog về tôi :

#mod-tagged-frd-article .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Hồ sơ blog :

#profile_card .rc_bd .rc_bc .bd dl :hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Bài viết :

Kiểu hiển thị bài đầu :

.comment-more li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Kiểu hiển thị tóm tắt :

.mod-alist-summary .main-bd li:hover{background:transparent url(Link Ảnh)}
.main-bd li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Kiểu hiển thị tựa bài :

.main-bd tr:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Thống kê Plus :

#statistic .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Cập nhật ngày :

#update_date .date:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Lịch :

#calendar .rc_bd .rc_bc .bd th:hover ,#calendar .rc_bd .rc_bc .bd td:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Xem thêm khi xem trực tiếp một bài viết :

.mod-more-blogs li:hover, .mod-more-blogs h3:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Module Bài viết về bạn hoặc có tag tên bạn,Người đăng ký yêu thích blog này cũng đồng thời thích :

.mod-relatives .rc_bd .rc_bc .bd ul li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Phần comment bài viết :

#comment_container li:hover{background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/06/61291229298765.png );}

Trích dẫn (0)

Tổng cộng 1 lời bình

Báo cáo
tàiphạm 13:46 23-05-2009

bạn ơi cậu có thể nói rõ từng bước làm được ko cám ơn hiều hiiiiiiiiiiiiiiiiiiiiii

Báo cáo
[N]hox[M]ichael14:27 25-05-2009

Bạn chỉ cần coppy cái code nào bạn cần vào CSS là xong ngay.Mình để màu đen nên bạn cẩn thận khi coppy nha.chúc bạn thành công.

HTML