Bài đăng phổ biến với góc bo tròn cho blogspot

Bài đăng phổ biến với góc bo tròn cho blogspot
Dưới đây sẽ giới thiệu cách tạo tiện ích bài đăng phổ biến với góc bo tròn cùng với thumbnail bo tròn cho blogspot.Tuy không có gì mới nhưng thị hiếu mỗi người khác nhau nên tôi post lên đây ai thấy thích thì xài
Xem thử:

DEMO

Hoặc xem thêm

DEMO

Tạo tiện ích
Vào chỉnh sửa mẫu và tìm tới thẻ ]]></b:skin>
Dán đoạn code sau vào trước nó rồi lưu mẫu lại
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
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);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

Tiếp theo vào bố cục chọn thêm tiện ích bài đăng phổ biến
Chỉ check vào ô dùng ảnh nhỏ và không check vào ô đoạn trích dẫn(nghĩa là ko có trích dẫn)
Nhận xét

Không có nhận xét nào :