Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot

Popular Post hay còn được gọi là Bài đăng phổ biến, Xem nhiều trong tuần,...tùy theo cách gọi của mỗi bạn. Là một thành phần ko thể thiếu trong Blog của các bạn. Nó giúp các bạn thống kê được những bài viết có lượt xem nhiều nhất trong Blog mình nhằm tạo sự chú ý đến người xem Blog.
Và để góp phần tạo nhiều sự chú ý hơn, Niệm Đợp Troai sẽ chia sẻ đến các bạn 1 số mẫu Popular Post tương đối là đẹp cho các bạn sử dụng khi cần thiết.

Để thực hiện các bạn tìm đến ]]></b:skin> và dán đoạn code mình thích lên trên thẻ nhé!

Kiểu 1

Code

/*--- Popular Posts --- */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#5A5F63;} .popular-posts ul li a:hover {text-decoration:none;}

Kiểu 2

Code

#PopularPosts1 h2{padding:7px 0 3px 0;width:100%;margin-bottom:10px;font-size:1.3em;text-indent:-12px;font-size:18px;text-align:center;color: #757575; /* Color of the widget's title */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:8px 0px 1px;left:-7px;width:290px;}#PopularPosts1 li{position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;left:-5px;width:285px;}#PopularPosts1 ul li{background: #eee;position: relative;display: block;padding: .4em .2em .4em 2em;*padding: .2em;margin: .5em 0;background: #ddd;text-decoration: none;border-radius: .3em;transition: all .3s ease-out;   }#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; top: 50%;margin: -1.3em;height: 2em;width: 2em;line-height: 2em;font-size: 15px;color: #fff; /* text color of numbers */background: #FB8835; /* background color of numbers */border: .2em solid #fff; /* border color */-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;text-align: center;font-weight: bold;border-radius: 2em;position: absolute;   left: 0;transition: all .3s ease-out;}#PopularPosts1 ul li:hover{background: #eee;}#PopularPosts1 ul li:hover:before{transform: rotate(360deg);   }#PopularPosts1 ul li a{font: 14px Georgia, serif; /* font size of post titles */text-shadow: 0 -1px 2px #fff;color: #444;display:block;min-height:25px;text-decoration:none;text-transform: uppercase;}#PopularPosts1 ul li a:hover{color: #444;}

Kiểu 3

Code

#PopularPosts1 h2{position:relative;right:-2px;padding:8px 63px 6px 17px; width:100%;margin:0;font-size:16px;background:#4F4F4F;color:#f2f2f2;text-align:left;text-indent:18px;}#PopularPosts1 h2:before{position:absolute;content:"";top:36px;right:0px;width: 0px;height: 0px;border-bottom:12px outset transparent;border-left:12px solid #000000; }#PopularPosts1 h2:after{position:absolute;content:"";top:-6px;left:-5px;width: 0px;height: 0px;border-bottom:24px outset transparent;border-top:24px outset transparent;border-left:24px solid #ffffff; /* Arrow background color on the left */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ width:100%;position:relative;left:0;margin:7px 0 16px 12px;padding:10px  4px 0 5px;}#PopularPosts1 ul li:before{ content:counter(li);counter-increment:li;position:absolute;top:-2px;left:-20px;font-size:35px;width:20px;color:#888888; } #PopularPosts1 ul li a{display:block;font-size:16px;color: #666;text-decoration:none;transition: all .1s ease-in-out;font-weight: bold;}#PopularPosts1 ul li a:hover{color:#3366FF;margin-left:3px;}

Kiểu 4

Code

#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; /* Color of the widget's title */text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #8E8E8E; /* background color of the numbers */height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #8E8E8E; /* background color of the right arrow*/}#PopularPosts1 ul li a{color: #444;text-decoration: none;   font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #ddd;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}   #PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}

Kiểu 5

Code

#PopularPosts1 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic; }#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}

Kiểu 6

#PopularPosts1 ul li:first-child:after{content:"1";color:#ff6262!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#55579e!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#FDB713!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child: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,#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 + 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:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:8px;text-align:center;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888;border:2px solid #eee}
#PopularPosts1 ul li a{display:block;margin-left:55px}

Các bạn có thể tùy chỉnh CSS cho phù hợp theo Blog của mình nha!
Nếu các bạn có mẫu nào khác đẹp hãy để lại Link Notepad mình sẽ cập nhật thêm vào bài viết và ghi nguồn về Blog các bạn. Cám ơn các bạn!