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

Thư mục: Thủ thuật 360Plus toàn tập |

Đăng ngày: 15:27 20-06-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 );}

Hiệu ứng nút ấn cho module bài viết kiểu hiển thị tóm tắt mình bổ sung từ bài viết của anh [W].Dephia >>> http://vn.myblog.yahoo.com/w-dephia/article?mid=15196