POPULAR POST (Bài đăng phổ biến) tuyệt đẹp cho Blogspot

Chào các bạn, theo yêu cầu của một bạn inbox cho BSW yêu cầu thì hôm nay mình xin được chia sẻ widget Bài đăng phổ biến giống như blog mình đang sử dụng.

Bài viết hôm nay mình sẽ chia sẻ đoạn CSS do mình viết để tùy biến widget Bài đăng phổ biến (Popular Post) của Blogspot. Thủ thuật này sử dụng hoàn toàn CSS nên sẽ không ảnh hưởng gì đến tốc độ của blog cũng như các thành phần khác trên blog của bạn nhé!

Các bước thực hiện 

Bước 1: Blogger > Bố cục, tìm widget Bài đăng phổ biến và chỉnh nó lại như thế này:


Bước 2: Chèn CSS này phía trên thẻ ]]></b:skin> hoặc thẻ </style> trong template:

#PopularPosts1 ul li a{display:block}
#PopularPosts1 ul{padding:10px 0}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:17px;color:#666;line-height:1.4em;transition:all ease-in-out .1s}
.PopularPosts .item-title{position:absolute;margin:0 0 0 130px;top:50%;transform:translate(0,-50%)}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d}
.PopularPosts li:first-child .item-title{position:inherit;margin:0;transform:none}
.PopularPosts li:first-child img{filter:brightness(30%)}
.PopularPosts li:first-child .item-title a{position:absolute;top:50%;transform:translate(0,-50%);padding:0 15px;color:rgba(255,255,255,0.7);text-align:center;box-sizing:border-box}
.PopularPosts li:first-child .item-title a:hover{color:rgba(255,255,255,.857575)!important}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li:first-child img{width:100%;height:170px}
.PopularPosts img{width:120px;height:80px;object-fit:cover;border-radius:4px}
.PopularPosts .widget-content ul li{list-style:none;margin:0 0 15px!important;padding:0;line-height:1.3em!important;position:relative}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:120px;height:80px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:120px;height:80px;border-radius:4px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{width:100%;height:160px;display:block}
.PopularPosts li:first-child .item-title a{font-size:20px;line-height:1.5;font-weight:300}

Lưu ý: Nếu blog bạn đã có css popular post trước đó thì hãy xóa nó đi nhé!

Bước 3: Lưu lại và xem kết quả

Tổng kết
Đây là mẫu Popular Posts đẹp và đơn giản nhất được thiết kế hoàn toàn bằng CSS, hy vọng bạn sẽ thích nó! Chia sẻ bài viết nếu nó hữu ích nhé! ;) 

(Nguồn: bacsiwindows.com)