Có khá nhiều bạn đã gửi cho Link Thủ Thuật yêu cầu chia sẻ Popular Posts mà web đang sử dụng! Nhiều bạn biết một chút về code, lập trình, html thì cũng có thể tự F12 rồi lấy code về sử dụng. Nhưng hôm nay mình sẽ chia sẻ cho bạn nào chưa biết cách tạo Popular Posts giống với Link Thủ Thuật nhé ! (DEMO xem ngay tại web thanh sidebar phải)
Các bước thực hiện
Bước 1: Đầu tiên các bạn cần phải xóa đoạn CSS cũ đi rồi mới có thể thêm đoạn CSS dưới đây vào dưới thẻ <style>
/* Popular Post by linkthuthuat.com*/Chú thích: màu in đậm là phần color (chữ và số thứ tự) trong Popular Posts, các bạn có thể thay thành màu blog của bạn
.PopularPosts .widget-content{padding:0;box-sizing:border-box; font-size: 15px}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:#222}
.PopularPosts .widget-content ul li {
margin: 0;
padding: 10px 0 10px 60px;
position: relative;
overflow: hidden;
border-top: 1px solid #2b2b2b;
border-bottom: 1px solid #111;
}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:14px;font-weight:400}
.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}
.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
.PopularPosts .widget-content ul li img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width: 300px;height:180px;overflow:hidden;display:block}
.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0,0,0,.7);z-index:1}
.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}
.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#f50;font-size:38px;line-height:1;z-index:2}
.sidebar .PopularPosts .item-title a{color:#b1b1b1;text-decoration:none}
.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}
Bước 2: Lưu lại và xem thành quả !
Quá đơn giản phải không nào! Hi vọng CSS này sẽ làm blog bạn trở nên đẹp hơn và sẽ làm bạn hài lòng! Đừng ngại comments bên dưới nếu bạn có thắc mắc gì nhé!
Chúc các bạn thành công!
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 ô cũng đăng lên facebook để 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.