Popular Post cho Blogger có hiệu cực ứng đẹp

Tiện ích Popular Post là tiện ích liệt kê ra những bài viết được nhiều người đọc và quan tâm. Popular Post là một tiện ích không thể thiếu với bất kì Blog nào.

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
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!