TIỆN ÍCH POPULAR POST CHO BLOGGER CÓ HIỆU ỨNG ĐẸP MẮT
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. Trong những bài viết thủ thuật blogger lần trước, mình cũng đã giới thiệu tới các bạn một số mẫu Popular Post cho Blogger cũng khá đẹp mắt. Các bạn có thể xem thêm :
- Numbered Popular Post cho Blogger đẹp mắt
- Hongkiat Popular Post cho Blogger đơn giản mà đẹp
- 4 kiểu Popular Posts cho Blogger cực đẹp
Gợi ý : Download template blogger miễn phí
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.
Demo các bạn xem tại đây. Xem phần phía cuối.
TIỆN ÍCH POPULAR POST CHO BLOGGER CÓ HIỆU ỨNG ĐẸP MẮT
Trước tiên bạn cần tạo tiện ích Popular Post cho Blogger bằng cách
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
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> :
[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]
.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]
Save template lại và quay về trang chủ kiểm tra.
Be First to Post Comment !
Đăng nhận xét