Elegant Popular Post Widget For Blogger

Today I'm here with a tutorial on how to stylify and customize blogger popular post widget elegantly.The normal popular post widget seem a awful when someone else views your website . But a dding a bit of Css can make you popular post shine like anything.Also, this popular post widget is cool awesome and is among the top ten most wanted widget for blogger.This widget is plain simple and elegant hence all should at least give it a don't forget,this is completely a Css widget and For no reason can slow down your page.Happy blogging !

Elegant Popular Post Widget For Blogger   -   Live Demo

This Blogger Widget is inspired from Blogtipsntricks.A special thanks to them for providing us such classic Widgets.This is  perfectly customized.Enjoy

Live Demo

How to Add Stylish Popular Post Widget To the Blog

IF you have any other Css for popular Posts,Then Kindly delete them before applying this

Find The Below Code

]]></b:skin>

Now add the following code above the searched Code

.PopularPosts {  background: #F2F2F2;  border: 1px solid #E3E3E3;  }
.PopularPosts h2 {  background: #8C8C8C;  color: #FFFFFF !important;  padding: 12px 24px !important;  margin: -1px -1px 0;  }
.PopularPosts .widget-content {  font-size: 15px;  margin: 0 !important;  }
.popular-posts ul {  margin: 0 !important;  padding: 0 !important;  }
.popular-posts ul li {  list-style: none;  border-bottom: 1px solid #ccc;  border-top: 1px solid #FFFFFF;  padding: 0 !important;  }
.popular-posts ul li:first-child  {  border-top: 0;  }
.popular-posts ul li:last-child  {  border-bottom: 0;  }
.popular-posts ul li:hover {  background: #fafafa;  text-decoration: none;  }
.popular-posts ul li a {  color: #404040;  display: block;  padding: 18px 24px;  }
.popular-posts ul li a:hover {  color: #262626;  text-decoration: none;  }
.PopularPosts img {  background: #fff;  border: 1px solid #CCCCCC;  display: block;  float: left;  height: 48px;  margin-right: 8px;  padding: 3px;  width: 48px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;  }

                                        If you encounter any problem,Don't hesitate to comment below !