Popular Post cho Blogger có hiệu ứng đẹp mắt

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 cho Blogger có hiệu ứng đẹp mắt

Bước 1: Trước tiên bạn cần tạo tiện ích Popular Post

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn Thêm Tiện ích (Add Widget)

4. Bấm chọn vào bài đăng phổ Biến (Popular Posts)

5. Save lại

Bước 2: Tiếp theo, chúng ta sẽ tạo hiệu ứng cho tiện ích vừa tạo

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.

4. Chèn đoạn code dưới đây trước thẻ ]]></b:skin> Sau đó Lưu lại và xem kết quả

.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%}