Số Bài viết phổ biến Widget cho Blogger

Vì vậy, tôi trở lại với thêm một bài viết được ưa thích tùy biến cho các blogger blog. Điều này là khá đặc biệt vì nó trông rất thanh lịch và có hiệu ứng chuyển tiếp tuyệt khi được quét. Chúng tôi hiếm khi có thể thấy các blog mà không sử dụng bài viết phụ tùng ưa thích. Điều này phụ tùng giảm tỷ lệ trả lại và tăng số lượt xem trang blog của bạn. Làm cho chúng hấp dẫn và bắt mắt sẽ làm cho nhiều người click vào nó do đó làm cho blog của bạn tuyệt vời hơn và tốt hơn.


Thêm các widget trong diện


Trước hết đi vào Blog Tiêu đề → Giao diện → Thêm Widget → Bài viết phổ biến. Thêm các widget trong vị trí mong muốn và lưu mẫu.

Thêm CSS trong Edit HTML


 Bây giờ hãy vào Blog Tiêu đề → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm  ]]> </ b: skin> trong hộp tìm kiếm. Sau khi nhận được mã thêm mã dưới đây đưa ra chỉ trên ]]> </ b: skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

Sau khi thêm mã lưu mẫu. Bây giờ bạn và truy cập của bạn có thể nhìn thấy widget này tuyệt vời số bài viết phổ biến trong blog của blogger của bạn.
Các tin khác