Bạn muốn hiển thị bài đăng phổ biến trên widget blogspot ấn tương, nhưng bạn không biết code cho nó như thế nào vậy thì hôm nay tôi sẽ hướng dẫn các bạn viết code cho phần bài đang phổ biến đẹp mắt nhé
Làm thế nào để Thêm Widgets Bài viết Phổ biến:
Đầu tiên bạn Đăng nhập vào tài khoản blogger của bạn rồi chuyển đến Giao diện => Thêm tiện ích => Bài đăng phổ biến
Đặt tiện ích bài đăng phổ biến như bên dưới hình ảnh
<style type="text/css">
/************************ Name= Popular Posts* Credit = MD Jillur Rahman* Website = www.codiblog.com* License = Attribution CC BY***********************/ .PopularPosts .item-thumbnail {
margin-bottom: 0;
-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;
box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-right: 10px;
} .PopularPosts ul li img {
height: 50px;
padding-right: 0;
width: 50px;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
} .PopularPosts .widget-content ul li {
background: #00aeef;
} .PopularPosts .widget-content ul li+li {
margin: 0 10px 0 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
} .PopularPosts .widget-content ul li+li+li {
margin: 0 20px 0 0;
} .PopularPosts .widget-content ul li+li+li+li {
margin: 0 30px 0 0;
} .PopularPosts .widget-content ul li+li+li+li+li {
margin: 0 40px 0 0;
} .PopularPosts .widget-content ul li:hover {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
} .PopularPosts .widget-content ul li:nth-child(2n+1) {
background: #222;
} .PopularPosts ul li a {
color: #fff;
font-family: Arial,serif;
font-size: 15px;
font-weight: 500;
line-height: 20px;
padding: 12px;
display: block;
}
</style>
Lưu lại mẫu và xem thành quả. Chúc các bạn thành công
Điểm 4.6/5 dựa vào 87 đánh giá