How to add popular posts to your Blog

How to add  your popular posts widget to your Blog in Blogger

Note:Adding kind of scripts for viewing your popular post in cinematic and fantasy ways(which the web is full of it ),Isn't friendly to SEO so skip it and stick to Google gadgets made for this,like:

And if you wanna Widget to add recent posts on your blog ,also Google offers you good Widgets,Just type recent post in the gadget search bar and you will find the widgets added for you by Google Blogger ,,,,,,,

After adding the suitable Widget to your Blogger and position it well ,you can modify it with CSS
Go to Template-->>Customize-->>Add CSS (here is some lines to start and i let the rest for your imagination and your art)

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #fff url(http://i1287.photobucket.com/albums/a623/ROJSL55AMG/arrowdown_zpsd621270e.jpg) no-repeat scroll 5px 10px;

list-style-type: none;

margin: 0 0 5px 0px;

padding: 5px 5px 5px 33px !important;

border: 1px dotted  #dddddd;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.popular-posts ul li:hover {

background: url(http://i1287.photobucket.com/albums/a623/ROJSL55AMG/arrowdown_zpsd621270e.jpg) no-repeat 2px;

border: 2px solid #dddddd;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

}

.popular-posts ul li a:hover {

text-decoration:none;

}

-Replace URL(http://) section,,, with any images you like (uploaded to photo sharing sites like photobucket.com,take the direct link url and paste it )
-The first place is the usual place and the second one when the mouse moves on the item (hover effect)
-Try this css it is very nice
-Share with me  your css imagination in comments