[Blogspot] Popular Posts có đánh số trên thumbnail tuyệt đẹp cho blogger

Vừa đêm qua mình mới thay cái widget Popular Posts (bài viết phổ biến) mới, suýt nữa thì xóa mất code cái cũ đi nhưng may quá là giữ được nên hôm nay share cho bạn nào muốn thay đổi lại giao diện mục Popular Posts của blog nhé.

Popular Posts đánh số tuyệt đẹp trên thumbnail cho blogger/blogspot

Cách thức hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán toàn bộ đoạn CSS dưới đây trước thẻ ]]></b:skin>

.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;    position: relative}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s}
.PopularPosts ul li a:hover{color:#7577a9}
.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: "";
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font-size: 70px;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}

Bước 3: Lưu template lại và chiêm ngưỡng thành quả.

Lưu ý: Tuy nhiên sẽ có không ít bạn gặp lỗi khi chèn CSS vào thì cách giải quyết đơn giản và gọn lẹ nhất là bạn hãy xóa toàn bộ CSS liên quan đến chỉnh sửa Popular Posts trước đó đi rồi hãy thêm CSS mới ở bước 2 vào nhé. 

2 mẫu trước đó:

• Popular Posts đẹp cho blog #1
• Popular Posts tự đánh số đẹp cho blog

Chúc các bạn thành công!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!