Tùy biến Bài đăng phổ biến tuyệt đẹp cho Blogspot bằng CSS (Style 2)

#Thủ Thuật #Windows #Blogger #Facebook

Tùy biến Bài đăng phổ biến tuyệt đẹp cho Blogspot bằng CSS (Style 2)

Share:
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 Bác Sĩ Windows đ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é! ;)
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● 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.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.