Tạo bài đăng phổ biến với sao vàng cho Blogspot

     So với Bài Đăng Phổ Biến có sẵn của Blog thì hôm nay mình sẽ hướng dẫn các bạn Tạo bài đăng phổ biến với Sao Vàng.

Ảnh được lấy từ Anhnhim.net

Live Demo

Hướng dẫn tạo bài đăng phổ biến với sao vàng

1. Trước tiên các bạn trang quản lý Blogger >> Mẫu >> Chỉnh sửa HTML 

2. Tìm đến thẻ đóng </head> và chèn code dưới đây vào trước thẻ </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Sau đó tiếp tục tìm đến thẻ đóng ]]></b:skin> và chèn toàn bộ code sau vào trước thẻ trên.

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 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:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 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:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.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;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Các bạn điều chỉnh lại vài thông số theo ý của các bạn.
4. Sau đó các bạn vào Bố cục >> Thêm tiện ích >> Bài đăng phổ biến.

Nguồn bài viết :
Tất cả bài viết được phát triển bởi tôi - Admin Hiếu
Nguồn code: www.anhnhim.net/

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

Chào thân ái!

Có lẽ bạn thích?