Popular post dengan tampilan warna warni membuat tampilan blog anda menjadi lebih menarik. silahkan anda ikuti langkah berikut ini untuk mengubah tampilan popular post anda menjadi lebih cantik:

Contoh Hasil

1. Silahkan anda login dulu ke blogger.com
2. Kemudian pilih menu template
3. Pilih tombol "Edit HTML" yang ada didalam menu template

4. Kemudian sobat pasang kode di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut.
5. Setelah kode diatas ketemu silahkan pasang kode dibawah ini tepat diatas  kode ]]></b:skin> atau </style> tersebut.
/* Popular Post Widget  JASABLOG.INFO*/
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
6. Setelah anda  pasang silahkan anda save pengaturan anda dan lihat hasilnya.
Demikianlah cara mengubah popular post bawaan menjadi Rainbow Popular Post, semoga bermanfaat untuk anda.