Monday, 22 April 2013

Tagged under: , ,

Add Stylish Popular Post Widget With Round Thumbnail in Blogger

Stylish Popular Post Widget With Round Thumbnail in Blogger
Hi guys today we are going to share with you a wonderful & awesome widget for your blogger blog. So our today post will be all about how to add & create a stylish popular post   widget with round thumbnail image  for blogger blog. Sometime you  might have observed that This widget is used by many blogger blogs & thats is just because of its awesome designing & professional looks. So many times we have analyzed that each and every blog keeping this widget by default which has unprofessional looks & non-customize thats in results which will not bring any changes in your blog. So if we considered it as backbone of a blog then why not to stylify & give awesome design to this widget. Learn how to customize popular post widget 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:

Stylish Popular Post Widget With Round Thumbnail in Blogger
  •  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:

Stylish Popular Post Widget With Round Thumbnail in Blogger
 After Expanding The Css Codes:
Stylish Popular Post Widget With Round Thumbnail in Blogger
  •  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(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/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:



Make A Badge Buttons for Blog





 

21 comments:

  1. It is very beautiful widget Bro. I am using it on my blog.
    Must Watch:

    MyBloggerBuster.Blogspot.Com

    ReplyDelete
  2. @Hamad Ansari

    Thanks Hammad Ansari we love your blog. its has awesome designing. keep it touch with PBT. see you soon

    ReplyDelete
  3. i like this widget, it is nicely designed

    ReplyDelete
  4. @Blogger

    thanks man your blog is nice. keep it ups

    ReplyDelete
  5. I really like it. Simple and neat. Thanks.

    ReplyDelete
    Replies
    1. Thanks Muhammad Ilam For your appreciations keep in touch bro.

      Delete
  6. popular post widget is the best way to gain some traffic for some late and popular posts of the blogs.such widget also helps to reduce the bounce rate of the blog because user stays on the blog for long time and hence it helps to increase traffic and visibility of the blog.thanks for sharing with us.ringtones

    ReplyDelete
    Replies
    1. Yes bro its indeed a very useful widget for blogger & wordpress. It keep the blog bounce rate as low as possible because user stayed for long times. We agree with rishab panchal

      Delete
  7. This is a beautifull and cute.

    ReplyDelete
    Replies
    1. Oh what a nice words Bro. Many many thanks to you. keep in touch and hear for update.

      Delete
  8. I got the code to work on one of my blogs but not the other. I am not sure how to fix it. I did everything the same way on each blog. Any suggestions? Love it on the one blog though!

    ReplyDelete
  9. well thanks hafeez it works good here are some more info about popular post widget

    ReplyDelete
  10. great widget for popular post it looks great in my blogger thanks appericate your works

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism