Tiện ích Popular Post trong bài viết này mình giới thiệu có hiệu ứng đẹp mắt và hữu dụng. Cụ thể, tiện ích Popular Post này có hình ảnh thu nhỏ và hiện thị tiêu đề bài viết, nội dung tóm tắt khi bạn rê chuột vào.
 |
| Popular Post hiệu ứng cực đẹp |
Hướng dẫn tạo Popular Post cho Blogger có hiệu ứng cực đẹp
Bước 1: Đăng nhập vào Blog => Vào mẫu (Template) => Chọn Thêm Tiện ích (Add Widget) => Bấm chọn vào bài đăng phổ Biến (Popular Posts) => Lưu lại.
Bước 2: Đăng nhập vào blog => Chọn mẫu (template) => Chọn chỉnh sửa HTML => Chèn đoạn code dưới đây trước thẻ ]]></b:skin> :
[css].PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position:
absolute;width: 230px;background-color: whiteSmoke;padding:
7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top:
60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition:
all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s
cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s
cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0)
0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:’Open Sans Condensed’,"Arial Narrow",Arial,sans-serif;font-size:125%}[/css]
Tiện ích Popular Post cho Blogger có hiệu ứng cực đẹp bây giờ đã nằm trong blog của bạn, nào hãy tận hưởng thành của thôi!