How to Add and Customize the Popular Posts Widget in Blogger

Popular Posts widget in blogger is really an important widget, It'll inform your readers what are the trending stories or article for a period of time, most importantly it drives traffic to the website thus customizing and giving some looks on this widget is really essential.That is why today I will be showcasing some customize Popular Posts Widget for you to have, and of course you are really encourage to do your own style. Just in case you have not known how to add the widget that I've been saying I added a tutorial about it. As usual its really simple so let us get started.

Adding Popular Posts Widget

Customizing the Widget
Since we already have a Popular Posts Widget in our blog , We just need to beautify. Customizing this widget is simple and easy. Below is a compilation of hand-picked customized Popular Posts Widget from other bloggers around the world. We just have to instruct the the HTML using CSS to design it. Below are some of the already-customized widget you can choose from.

- Click here to see the full list of some pre-designed Popular Posts Widget.

STYLE #1 www.helplogger.blogspot.com



#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;}

STYLE #2 www.trueblogtips.com



.popular-posts ul li {margin-top:0;border-bottom:1px dashed #d2d2d2;}.PopularPosts .item-title {font-weight:700;font-style:italic;font-size:14px;text-align:justify;}.PopularPosts .widget-content ul li {background:#fff;padding:0;}.PopularPosts img {width:110px;padding:.4em;}