Popular Post Bài Viết Phổ Biến Premium Cho Blogspot

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ẹ.

bai dang pho bien, popular, popular post blogger, Popular Post cho Blogger, Popular Post cho Blogger có hiệu ứng đẹp mắt, populer post, Popular Post Bài Viết Phổ Biến

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:&#39;&#39;;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)}
Bước tiếp theo các bạn lưu mẫu và xem nó có hoạt động hay không nhé. Nếu kích thước của hình thu nhỏ nhỏ hoặc không đúng, bạn có thể đặt nó trong phần này. Điều chỉnh chiều rộng và chiều cao của ảnh.
#PopularPosts1 ul li img{width:100%;height:200px;}
Nếu blog của bạn chưa có awesome thì thêm awesome vào blog của mình nhé đặt ở trên </ head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Các bạn có thể chỉnh sữa css theo tùy ý của mình nhé. cám ơn các bạn đã ghé thăm bài viết về mod Popular Post blogger

2 Bình Luận "Popular Post Bài Viết Phổ Biến Premium Cho Blogspot"