Tạo Popular Post Nhiều Màu Cho Blogspot

- Chào các anh em hôm nay Nghĩa mình sẽ hướng dẫn làm một mẫu popular post ngầu nhé như trên hình :v 

1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa HTML,  tìm thẻ đóng ]]></b:skin> hay thẻ đóng </style> và đặt đoạn CSS sau vào trước một trong hai thẻ đóng đó

/* CSS Popular Post */ .PopularPosts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding} .popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} .popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%} .PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-bottom:none} .PopularPosts li:hover{background:#0FB9BB} .PopularPosts li a{text-decoration:none} #PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}  .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0} .PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0} .PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0} .PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0} .PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0} .PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0} .PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0} .PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0} .PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0} .PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}

 Chúc các anh em thành công <3

Bài Viết Liên Quan

Phản Hồi Độc Giả

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Bình luận của bạn sẽ được gửi đến Admin để kiểm duyệt.
Biểu Tượng Cảm XúcBiểu Tượng Cảm Xúc