Thêm tiện ích Popular Post đẹp và đơn giản cho Blogspot

Sau đây, mình sẽ hướng dẫn các bạn thêm tiện ích Popular Post đẹp và đơn giản cho Blogspot. Giao diện của nó chỉ gồm một icon ngôi sao và tên tiêu đề bài viết.

Đầu tiên, các bạn vào Chủ đề >> Chỉnh sửa HTML >> chèn đoạn CSS sau trước thẻ  ]]></b:skin>.

.popular-posts li:nth-child(2n+2){background:#F2F2F2}.popular-posts li{font-weight:500;border-bottom:0 solid #ddd;list-style:none;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.popular-posts li:last-child{border-bottom:0}.popular-posts li:before{content:"\f006";display:inline-block;font:normal normal normal 14px/1 FontAwesome;transform:translate(0,0);margin-right:3px;color:#3b5998;font-size:16px}.popular-posts li:hover:before{content:"\f005";display:inline-block;font:normal normal normal 14px/1 FontAwesome;transform:translate(0,0);margin-right:3px;color:#3b5998;font-size:16px}.PopularPosts .widget-content ul li a{color:#222}.PopularPosts .widget-content ul li a:hover{color:#3b5998}.PopularPosts img:hover{opacity:.4}.PopularPosts .widget-content ul li{padding:8px;display:block;font-size:16px}
.widget-item-control{display:none!important}
.PopularPosts .item-thumbnail{margin:0 10px 0 0 !important;width:90px;height:64px;float:left;overflow:hidden;border-radius:2px}
.PopularPosts ul li img{padding:0;width:90px;height:64px;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.PopularPosts ul li img:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.PopularPosts .widget-content ul li{overflow:hidden;border-top:3px solid #EEE;padding:7px 0;    white-space: nowrap;margin-left: 1px;text-overflow: ellipsis; margin-right: 10px}
.sidebar .PopularPosts .widget-content ul li:first-child{padding-top:0px;border-top:0px}
.PopularPosts ul li a{font-family:Arial;color:#222;font-weight:500;font-size:17px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height:1.5em}
.PopularPosts ul li a:hover{color:#3b5998}
.widget-content .PopularPosts{padding:0}.custom-widget li:nth-child(2n+2),.popular-posts li:nth-child(2n+2){background:#F2F2F2}.popular-posts li:before{content:"\f006";display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;transform:translate(0,0);margin-right:3px;color:#444;font-size:16px;margin-left:1px}

   Sau đó các bạn lưu template lại. Rồi chọn Bố cục >> Bài Đăng Phổ Biến và cài đặt như hình dưới:

 Cuối cùng chỉ cần lưu lại và xem kết quả.

 Chúc các bạn thành công!!!!

Share this post