Customize Blogger Popular Posts Power by CSS

Sometimes the original blogger widget popular posts which located on your blog widget sidebar is very simple and it does not much attraction for the visitors. The blogger sidebar popular posts is able to customize, so in this tutorial I will give you a the another CSS code that you can use it to decorate your popular posts on blogger widget sidebar, the CSS code is specific to image moving in degree and list background.  Check below tutorial to find out the customized CSS code.

How to customize Popular CSS on Widget Sidebar

Live Demo

Step 1: Go to blogger.com and log in your blog account.

Step 2: On the dashboard just click on "Layout" link and then click  on"Add a Gadget "link.

Step 3: Now you will get a popup banner with many plugins that allows you to use for your blog. But what you have to find is "Popular Posts" just scroll down then click on [+] button when you found it to add it to your blog widget sidebar.

Step 4: On Dashboard just go to "Template" then click  "Edit HTML"

Step 5: Now just click anywhere in the HTML Code area and then press Ctrl + F or Command + F for Mac to search for ]]></b:skin> tag.

Step 6: Jus before it, paste this below CSS code.

/*--Popular Post----------*/
.PopularPosts .widget-content ul li {
background: #ededed;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
}
.PopularPosts .widget-content ul li:hover {
background: #fff;
}
.PopularPosts ul li a {
font: 14px verdana;
color: black;
}
.PopularPosts .item-thumbnail {
margin: 0 15px 0 0;
padding-top:4px;
}
.PopularPosts .item-title {
padding-top:15px;
}
.PopularPosts .item-thumbnail img {
background:#f3f3f3;
height:60px; width:60px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);}
.item-thumbnail img:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
}
.relatedsumposts img {
  /* thumbnail properties */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

Step 7: A final step is just press Save Template button to save and change and enjoy it.