Blogspot
Popular Post
Tutorial
Widget
Ở bài trước mình đã hướng dẫn các bạn tạo số đếm cho Popular Posts "Popular Posts xếp hạng dạng số cho Blogspot". Giờ thì chúng ta thêm một chút CSS cho nó đẹp hơn và phù hợp với blog nhé.
Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm kiếm dòng sau:
Phân tích dòng này:
#PopularPosts1 ul li:first-child //Đây là chọn thẻ li đầu tiên của #PopularPosts1
Tiếp theo chúng ta thấy nó + li + li + li:after có nghĩa là nó sẽ đếm số từ thẻ li đầu tiên first-child + tiếp thẻ li thứ 2,3,4 và chọn thẻ thứ 4 thì thêm :after để chọn nó.
content: "4"; //đây là số đc viết vào đầu thẻ li thứ 4
color: #FFF; //màu của số 4
background-color: #999; //màu nền
padding: 0px 4px; //thụt vào left và right 4px, top và bottom 0px
border-radius: 3px; //bo tròn cho viền ngoài
Hãy sửa lại cho phù hợp với blog của bạn.
 |
| Popular Posts dạng số style cho Blogspot |
Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm kiếm dòng sau:
]]></b:skin>Và thêm CSS và trước nó:
/* #PopularPosts
--------------------------------*/
#PopularPosts1 ul li a{font-weight: bold;}
#PopularPosts1 ul{list-style-type:none;float:left;width:100%}
#PopularPosts1 ul li{position: relative;padding: 7px 0px 0px 30px;float: left;overflow: hidden;width: 90%;height: 40px;border-bottom: 1px solid #F0F0F0;}
#PopularPosts1 ul li:last-child{border-bottom: none;}
#PopularPosts1 ul li:first-child a{float:left;margin-left:0!important;}
#PopularPosts1 ul li:first-child:after{content:"1";color:#FFF;background-color: rgb(239, 43, 117);padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li{}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#FFF;background-color: #a16eb1;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li{}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#FFF;background-color: #a16eb1;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after {
position:absolute;left:2px;top:10px;float:left;margin:0;text-align:center;width:15px;height:20px;line-height:20px;font-weight:bold;}
Phân tích dòng này:
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color:#FFF;background-color: #999;padding:0px 4px;border-radius: 3px;}
#PopularPosts1 ul li:first-child //Đây là chọn thẻ li đầu tiên của #PopularPosts1
Tiếp theo chúng ta thấy nó + li + li + li:after có nghĩa là nó sẽ đếm số từ thẻ li đầu tiên first-child + tiếp thẻ li thứ 2,3,4 và chọn thẻ thứ 4 thì thêm :after để chọn nó.
content: "4"; //đây là số đc viết vào đầu thẻ li thứ 4
color: #FFF; //màu của số 4
background-color: #999; //màu nền
padding: 0px 4px; //thụt vào left và right 4px, top và bottom 0px
border-radius: 3px; //bo tròn cho viền ngoài
Hãy sửa lại cho phù hợp với blog của bạn.
Đăng nhận xét