how to Add Popular Posts Widget In Blogger

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 !
0 comments:
Post a Comment