Xin chào tất cả mọi người hình như mẫu bài viết phổ biến này khá là nổi bậc trong các mẫu template blogspot, mẫu Popular Post này thường dành cho các template Premium vì nó khá đẹp và nhẹ.
Popular Post là tiện ích thống kế các bài viết có lượt view nhiều trong 7 ngày, 1 tháng hoặc tất cả khi khách ghé thăm blog của bạn , hiện nay có nhất nhiều cách để tạo ra những bài đăng phổ biến đẹp bằng nhiều cách khác nhau.
Popular Post Blogspot mình muốn nói đến đây là mẫu nhanh gọn nhẹ với hiệu ứng đẹp mắt cho blogger, cụ thể tiện ích này gồm một ảnh nổi bật và các mục con khác hiện ở sau đáp ứng tất cả về tốc độ blogger mà không lo bị blogspot chậm vì chứa quá nhiều widget.
Hướng Dẫn Tạo Popular Post styles Đẹp Cho Blog
Bước 1 : Vào edit html
Bước 2 : Vào ]]></b:skin> và chèn đoạn code dưới vào
Bước 3 : Lưu ý xóa css mặc định Popular Post
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#fff}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:100%;height:200px;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}
#PopularPosts1 ul li img{width:100%;height:200px;}
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
