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)
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    » Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
    » Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.

    Nhận bài viết mới