Google Agra: how to Add Popular Posts Widget In Blogger

how to Add Popular Posts Widget In Blogger

Popular posts widget is also in blogger widgets   as default but to give it a new look you need to   make some changes in CSS coding. Today we   are providing a beautiful popular widget for   blogger which have a great look and have an    awesome hover effect. 

How To Add Popular Posts Widget In Blogger?

To add This widget in Blogger you need to follow these simple steps:-

• First Go To Blogger > Layout
• Click on Add A Gadget
• Now Click on Popular Posts widget and make the follow changes as showing in picture

• Make the same changes as shown above in picture
• And Click on Save Button
• Now the second part is add the CSS code for this
• Go To Blogger > Template
• Click on Edit HTML

• Click on Black Arrow to expand the coding
• Now search </b:skin> using ctrl+f
• Above </b:skin> paste the following code

/*--- MBW Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/S
modosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.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;
}

• Now click on Save Template and you are done !