[ Blogger ] Thêm Tiện Ích Popular Post Đẹp Và Đơn Giản Cho Blogspot

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn làm tiện ích Popular-post đẹp nhưng nhìn rất đơn giản.

  Đầ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>.

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