Customize Popular Posts Widget with CSS3

Popular Posts Widget is always been one of the most favorite widgets for all bloggers, today I'm going to tell you how to make them better with CSS3.
Last time I had posted about How to Add CSS Premium Social Share Buttons to Blogger, I love posting about CSS Blogger Widgets and Tricks, CSS Widgets are always been preferred by pro bloggers.

Blogger usually provide default popular posts theme but its not much attractive and stylish, so lets learn how to do this -

How to Customize and Give a Responsive Look to your Popular Posts Widget?

For this widget you need pre-installed default Blogger Popular Posts Widget.
[If you haven't then - Go to Blogger > Dashboard > Layout > Add Gadget > Select "Popular Posts " > Click Save]

Don't Forget To Backup your Blogger Template ! [How to Backup Your Blogger Template]

Now Customizing the Default Popular Post Widget on Your Blog.
1. Go to Blogger > Dashboard > Template > Edit HTML.
2. Find The Code ]]></b:skin>
3. After finding ]]></b:skin> code, just Copy the following code and paste above it.

/*— techethix.tk — */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmuxwu47z9qD3vwlmE_jmP6M3rLwtJOO2eM5RU0KR8sbFeQaxizibLUGeU5QFr5CGAXCmcs5rr9xWvl9XOoyQqW80Smrw0sGXYO8J4CUIYRWljAIanDWqJvkg38HPfKgQ1yaR6_vXeuLE/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4);
  box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4);
}

4. Now Find </body> code by pressing Ctrl+F and Copy the following code and just above the </body> code.

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<a href="http://goo.gl/Wpv0RJ">!</a>

5. Click Save Template ! That's It You are Done Now ! Go to Your Blogger Blog and Check this widget !
Don't forget to Subscribe Us by Email and you can also share out posts !
Drop Your Comments if you have any problem with our gadgets, aur also atleast say thanks to Us by dropping your comment here :D