Popular Posts Widget With Multi Colored Style

To add popular posts widget with multi-color display like the above? Then Just follow our tutorial:
 
First Step:

1. Login to your Blogger account.
2.  
3. Goto template Choose Edit HTML >> Find the code  ]]> </ b: skin>
5. Copy and paste below code before ]]> </ b:skin> 
6.  

# PopularPosts1 ul li a: hover {color: # fff; text-decoration: none}
# PopularPosts1 ul li a {-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px; color: # 333333; display: block; font-family: Georgia, 'Times New Roman', Times , serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 40px 0px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align:-webkit-auto; text-decoration: none! important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word -spacing: 0px;}
# PopularPosts1 ul li
# 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; top: 10px; right: 5px; border-radius: 50%; border: 2px solid # ccc; background: # 353535;-webkit-box-shadow: 0px 0px 5px # 000;-moz-box-shadow : 0px 0px 5px # 000; width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: # fff} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li {background: # DF01D7; width: 90%}
# 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: # B041FF; width: 90%} # 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 {background: # F52887; width: 90%} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"} # PopularPosts1 ul li: first-child + li + li + li + li + li {background: # 7ee3c7; width: 90%} # 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: # f6993d; width: 90%} # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after {content: "7"} # PopularPosts1 ul li: first-child + li + li + li + li {background: # 33c9f7; width: 90%} # PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"} # PopularPosts1 ul li: first-child + li + li + li {background: # c7f25f; width: 90%} # PopularPosts1 ul li: first-child + li + li + li: after {content: "4"} # PopularPosts1 ul li: first-child + li + li { background: # ffde4c; width: 90%} # PopularPosts1 ul li: first-child + li + li: after {content: "3"} # PopularPosts1 ul li: first-child + li {background: # ff764c; width: 90 %} # PopularPosts1 ul li: first-child + li: after {content: "2"} # PopularPosts1 ul li: first-child {background: # ff4c54; width: 90%} # PopularPosts1 ul li: first-child: after {content: "1"} # PopularPosts1 ul {margin: 0; padding: 0px 0; list-style-type: none} # PopularPosts1 ul li {position: relative; margin: 6px 0; border-radius: 25px 25px 0px 0px ; border: 2px solid # f7f7f7;-webkit-box-shadow: 3px 3px 3px # 000;-moz-box-shadow: 3px 3px 3px # 000; padding: 10px}

  
Then save it.
 
Second Step:

1. Goto Layout >> Then select add gadget>>Then Select Popular Posts Widget >> uncheck image thumbnails and captions, select how many posts you want to display.
2.  
3. Save It and see the results!

Related Posts: