New popular Post Widget For Blogger

New 2015 popular post widget

This POPULARPOST  widget is excluviley designed by allin one web.

This has mouseover effect and awesome professional look.

TO ADD THIS WIDGET:

• Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.
• Now set this setting as shown below.

Note: choose Number of post to show upto 10 but dont make it below 6.

Now follow Following steps to add CSS Code.

• After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.
• Now Backup your Template to be safe if you mess something up.
• After Template been selected click on Edit HTML and search for below code.

]]></b:skin>

• Now capt and paste following code just above the code you search.

/*--- Allin1-Web - Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:2px 2px 2px 2px !important;
border-top:3px solid #FFA555;
border-left:3px solid #FFA555;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
border-radius:10px;
margin-left:5px;
box-shadow: 1px 1px 1px 1px #ff5714 inset;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

• Click on save template.
• Done...See preview.

Keywords.  Professional Popular Post 2015 widget, New Popular Post CSS gadget