Add Stylish Popular Post Widget With Round Thumbnail in Blogger

What is popular post widget in blogger ?

In simple words we may define it as " Its is a Tools or gadget thats help in picking & showing the top visited posts inside your blogger blog in front of your visitors " while using this gadget readers are easily landed on your previous Top ranking posts without searching them hardly. This gadget works on the following bases criteria. If it could select for 7 days it will show all the popular posts according to selected days. if we could keep it for a month then it will show all the top visited posts according to the selected durations of Time. if we could keep it for all the time it will show all the Top posts from the beginning  of the time. This widget is lighter it will not increase your Blog Loading Time its simple css coding. 

Why People Use this widget in Blog/Website

This widget is showing mostly on the right side of a blog. The gadget in default Blogger Templates are not so attractive & designing's thats why hated by many bloggers but today we have brought so attractive and designingful gadget where it will attracts your visitors as well as also give a professional designing to your templates. if you are really a blogger geeks & wants to promote your Blog/ websites then would be more useful for you to use this awesome widgets.

How To add Stylishly Popular Post Gadget in Blogger Blog ?

Follow our below given steps to add the gadgets in blog. This was created by MBL so be respect & credit backs to developer while sharing this gadget.

• Step 1:
• Go to blogger Dashboard:
• Go to >> Layout:
• Click on the Add a gadget & choose popular posts gadget from the gadgets list menu.
• Click all proper options:

•  To check the snippet option it willl also show post summary:
• Finally Click on save and you done step 1:

• Step 2:
• Go to blogger template:
• Search For below code <b:skin>...</b:skin> & click to expand:

 After Expanding The Css Codes:

•  Before ]]></b:skin> Past The Below Given Code:  ( see the above image )

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgkSxwcVGX7FB9sriI81Tc6RCCS42Fq6AEh9FwzHchr6Bfor75vletvqsF0eqJZHjYz984sVtCf2ZvkWw211JzSRJaNXkxlr_Jyrxcr27RKPrIj6OSY_8ZSRbpNa-r2p8cDQTzL3x9v0/s1600/1.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;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Now save and you have done almost:




 

Tweet