Share Popular Posts Style Cực Đẹp

Tổng chào các đọc giả của tôi, thời gian vừa qua có quá nhiều chuyện cần giải quyết nên mình không viết bài cũng như không đi tương tác với các blog bạn bè được. Hôm nay mình đi quờ quạn thì thấy cái bài viết liên quan của HongHaiBlog hơi bị đẹp nên mình rip về và edit sơ lại và share cho các bạn đây. Cái này đơn giản vô cùng, làm theo mình nhé!

Như bao thủ thuật khác thì vào trang quản trị blogger.com ⇾ Bố cục (layout)⇾ ThêmTiện Ích (Add Widget) ⇾ Bài đăng phổ biến (Popular Posts) rồi chỉnh sửa lại như hình dưới rồi lưu lại

 Sau đó vào phần chỉnh sửa html của blog theo đường dẫn Chủ đề (Theme) ⇾ Chỉnh sửa HTML rồi thêm đoạn css sau vào trên thẻ đóng ]]></b:skin>

/*css bài viết phổ biến*/
.PopularPosts img{padding: 0;float:left;margin-right:10px; background:#FFF;width:90px;height:70px; border-radius: 10px 10px 10px 10px;  -webkit-transition: .3s;}
.PopularPosts img:hover {-webkit-transform: rotate(360deg);}
.popular-posts {
background: #fff;
padding: 0 0 10px;
padding-left: 5px;
padding-right: 5px;
}
.popular-posts li:hover{background: linear-gradient(160deg, #9da387, #ff9900);    border-radius: 10px 10px 40px 10px;}
.popular-posts li{
list-style: none;
border-radius: 10px 10px 10px 10px;
margin: 6px 0 0 0;
background: #6d6d6d;
-webkit-transition: .3s;
}
.popular-posts ul {     margin: 0;
}
.popular-posts ul li {     padding: 5px 35px 0px 5px!important;
}
.popular-posts li a{
font: 700 16px Roboto Condensed;color:#fff;-webkit-transition: .3s;
}
.popular-posts li a:hover{
color:#555555
}

Tới đó là hoàn thành 98% rồi đó, công việc bây giờ của các bạn là tìm và xoá css cũ đi để tránh bị xung đột, cuối cùng là lưu Template lại và xem kết quả thôi

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

Lâu quá rồi không viết bài nên văn chương như shit =)) các bạn thông cảm nha <3