Popular Post với hiệu ứng bo tròn cho Blogger

Popular Post Widget with Rounded Effect for Blogger

Popular Post chắc hẳn là 1 widget không còn xa lạ với các Blogger, hôm nay Iris Tips sẽ chia sẻ cho các bạn cách trang trí tiện ích này cho website của bạn.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6ZnbriIw1-_MfVIIHjytlhdYSpKpgZOeknDWuzn9957vCHdgCOWCiCnVtY2243LKpnlAliv6qQNLXuax3USnJEUFLmsQO4n_y_ig0FT_sshncqTrh-2xE9f2aRqrxVaRFweUAuloMU0/s1600/1.gif)  no-repeat scroll 5px 10px;list-style-type:none;margin:0 0 5px 0;padding:5px 5px 5px 20px!important;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.popular-posts ul li:hover{border:1px solid #6BB5FF}
.popular-posts ul li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}

HTML

2Trở lại Bố cục >> Thêm tiện ích Bài đăng phổ biến như hình bên dưới

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm