Tùy biến Bài đăng phổ biến tuyệt đẹp cho Blogspot bằng CSS (Style 2)
Chào các bạn, theo yêu cầu của một bạn inbox yêu cầu mình 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}
Bước 3. Lưu lại.
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é! 😉