Thêm bài đăng nổi bật xếp hạng 5 sao cho Blog

Ở bài viết trước Tho Android đã chia sẻ cách để thêm Tiện ích hiển thị nhận xét mới nhất cho Blogspot. Tiếp theo Serial về Thủ Thuật Blogspot, blog sẽ chia sẻ cách để thêm tiện ích Bài đăng nổi bật, đồng thời hiển thị xếp hạng theo Star(sao). Bây giờ chúng ta sẽ tiến hành làm:

☼ Đối với Blogger:

+Bước 1: Bạn vào https://www.blogger.com, vào Bố cục, nhấp chọn Thêm tiện ích tại ví trí bạn muốn hiển thị tiện ích, tiếp tục chọn Bài đăng nổi bật.

+Bước 2: Sau đó trở lại trang chủ Chọn Mẫu , nhấp chọn Chủ đề và chọn Chỉnh sửa HTML 

+Bước 3: Bạn Ctrl + F tìm kiếm thẻ đóng  ]]></b:skin>

+Bước 4: Bạn chèn đoạn code bên dưới nằm trước thẻ ]]></b:skin>

<!-- css hiển thị bài nổi bật xếp hạng theo Star -->
.item-snippet{display:none}
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:5px 10px 0 0;width:60px !important;height:60px !important;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.3em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:2px;right:0;margin:0;padding:0;font-weight:normal;line-height:normal;transition:all .3s;font-size: 12px;}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:400;padding-bottom:.2em;padding:0 5px}
<!-- code sưu tầm từ internet -->

☼ Lưu lại là thành công bạn nhé !

☼ Khi làm thành công bạn sẽ được như vậy: