Tạo widget Popular Post tuyệt đẹp cho Blogspot có số đếm giống PheBlog - Blog Giải Trí Tổng Hợp Cực Phê

Monday, September 3, 2018

Tạo widget Popular Post tuyệt đẹp cho Blogspot có số đếm giống PheBlog

Lê Trọng Trung
September 03, 2018 - Monday, September 3, 2018

Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog PHEBLOG.TK.
Theo yêu cầu của một bạn yêu cầu mình chia sẻ cách làm widget bài đăng phổ biến có số đếm ở phía trước (giống blog của mình), thì bài viết hôm nay mình sẽ chia sẻ đoạn CSS mà mình viết để tùy biến widget popular post (hay bài đăng phổ biến) mà mình đang sử dụng trên blog.




Thủ thuật rất đơn giản, chỉ cần một ít CSS và ngoài ra không cần làm thêm bất kỳ việc gì nữa, xem cách làm nhé.

Các bước thực hiện

Bước 1. Truy cập vào trang chỉnh sửa HTML.
Bước 2. Tìm thẻ ]]></b:skin> và dán CSS bên dưới vào phía trước nó.


 #PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:15px 2px 10px 30px;
left:-7px;

}
#PopularPosts1 li{
position:relative;
margin:0 0 20px 0;
left:-5px;
    padding: 6px 0px 6px 30px;

}
#PopularPosts1 ul li{
background: #fff;
position: relative;
display: block;

border: #ccc solid .0em;

text-decoration: none;

transition: all .3s ease-out;  
    font-family: "Roboto Condensed",sans-serif;
    text-transform: uppercase;

}


#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* kích cỡ và font chữ */
text-shadow: 0 -1px 2px #fff;
color: #444;
min-height:25px;

}
#PopularPosts1 ul li a:hover{
color: #444;
}


#PopularPosts1 ul li:before {
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
    background: #fff;
    display: inline-block;
    float: none;
    margin-right: 10px;
    color: #119fff;
    border: 1px solid #119fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    transition: all .3s ease;
text-align: center;
position: absolute;   
left: 0;
transition: all .3s ease-out;
   
}
#PopularPosts1 ul li:nth-child(1):before{color: #fff!important; border: double!important;order: 1px solid #FB5A5A; background:#FB5A5A;}
#PopularPosts1 ul li:nth-child(2):before{color: #fff!important; border: double!important;order: 1px solid #58a59e; background:#58a59e;}
#PopularPosts1 ul li:nth-child(3):before{color: #fff!important; border: double!important;order: 1px solid #7577a9; background:#7577a9;}
Bước 3. Lưu mẫu và tận hưởng thành quả! Lưu ý: Bạn phải xóa hết các CSS tùy biến cũ (nếu có) nhé, nếu không sẽ bị xung đột và... lỗi đấy. Nếu không thích màu có sẵn thì bạn có thể thay mã màu khác vào ba chỗ in đậm ở trên nhé. Hãy Đăng Kí Email Ở phần hỗ trợ của blog để theo dõi bài viết mới từ PheBlog

:B23:
:B28:
:B37:
:B88:
:lol:
:89:
:amen:
:bom:
:gach:
:buoi:
:buon:
:chao:
:chay:
:clgt:
:die:
:dien:
:den:
:them:
:troll:
:yeu:
:hi: