Modifikasi tampilan Popular Post

Demo

1. <style>  
2. /* Custom CSS for Blogger Popular Post Widget */  
3. .PopularPosts ul,  
4. .PopularPosts li,  
5. .PopularPosts li img,  
6. .PopularPosts li a,  
7. .PopularPosts li a img {  
8.   margin:0 0;  
9.   padding:0 0;  
10.   list-style:none;  
11.   border:none;  
12.   background:none;  
13.   outline:none;  
14. }  
15.   
16. .PopularPosts ul {  
17.   margin:.5em 0;  
18.   list-style:none;  
19.   font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;  
20.   color:black;  
21.   countercounter-reset:num;  
22. }  
23.   
24. .PopularPosts ul li img {  
25.   display:block;  
26.   margin:0 .5em 0 0;  
27.   width:50px;  
28.   height:50px;  
29.   float:leftleft;  
30. }  
31.   
32. .PopularPosts ul li {  
33.   background-color:#eee;  
34.   margin:0 10% .4em 0;  
35.   padding:.5em 1.5em .5em .5em;  
36.   countercounter-increment:num;  
37.   position:relative;  
38. }  
39.   
40. .PopularPosts ul li:before,  
41. .PopularPosts ul li .item-title a {  
42.   font-weight:bold;  
43.   font-size:120%;  
44.   color:inherit;  
45.   text-decoration:none;  
46. }  
47.   
48. .PopularPosts ul li:before {  
49.   content:counter(num);  
50.   display:block;  
51.   position:absolute;  
52.   background-color:black;  
53.   color:white;  
54.   width:30px;  
55.   height:30px;  
56.   line-height:30px;  
57.   text-align:center;  
58.   top:50%;  
59.   rightright:-10px;  
60.   margin-top:-15px;  
61.   -webkit-border-radius:30px;  
62.   -moz-border-radius:30px;  
63.   border-radius:30px;  
64. }  
65.   
66. /* Set color & level */  
67. .PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}  
68. .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}  
69. .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}  
70. .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}  
71. .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}  
72. .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}  
73. .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}  
74. .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}  
75. .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}  
76. .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}  
77. </style>