20 Oct 2014

5 Different Types of Popular Posts Widget For Blogger

On In ,

39 Comments

The Popular Posts Widget is one of Blogger's official widgets and it is very easy to add this to your Blog. Here is a simple tutorial for creating beautiful Popular Posts Widgets for your Blog using CSS. No need to edit the template. 

Step I: Adding the Popular Posts Widget to Your Blog

From your Blog's Dashboard, navigate to Layout --> Add a Gadget --> and select Popular Posts from the list. Under the 'Show' section, check 'Image Thumbnail' and uncheck 'Snippet'. Also select the number of posts from the drop down list. Now click Save.

Configuring Blogger Popular Posts Widget

Step II: Adding CSS

Now go back to your Blog's Dashboard and navigate to Template --> Customise --> Advanced --> Add CSS. Select one of the following CSS styles. Copy the code and click Apply to Blog.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Style 1:

Blogger Popular Posts Widget With Tumbnails Style 1
.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Style 2:

Blogger Popular Posts Widget With Tumbnails Style 2
.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 30px/10px;
-webkit-border-radius: 30px/10px;
border-radius: 30px/10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Style 3:

Blogger Popular Posts Widget With Tumbnails Style 3
.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px 0px;
-webkit-border-radius: 100px 0px;
border-radius: 100px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Style 4:

Blogger Popular Posts Widget With Tumbnails Style 4
.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 20px 0px 20px 0px;
-webkit-border-radius: 20px 0px 20px 0px;
border-radius: 20px 0px 20px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Style 5:

Blogger Popular Posts Widget With Tumbnails Style 5
.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

39 comments:

  1. Loved it!!! Thank you very much!!!

    www.curvyliciousme.com

    ReplyDelete
  2. hi thanks
    www.indomotorbike.com

    ReplyDelete
  3. Is there a horizontal option?

    ReplyDelete
  4. wow great tutorial, thanks for sharing

    please visit me back at
    www.merangkaitulisan.blogspot.com

    i assume i put the code in the body right?

    ReplyDelete
    Replies
    1. Thank you Gianto! When I tested this on Ethereal template, I found that the code appears above this line:

      --></style>
      <style id='template-skin-1' type='text/css'><!--

      However, I can see that it's working fine on your blog!

      Delete
  5. Hi Anjana great designs thank you! Is there anyway to make the title text go below the image?

    ReplyDelete
    Replies
    1. Thank you Lucadonta! You may please try this:

      .PopularPosts .item-thumbnail {margin: 0;width:250px;}
      .PopularPosts .item-title {float:left;}

      Delete
  6. Hi, is there a way to make the font of this widget smaller? :/

    ReplyDelete
    Replies
    1. Sure. In this line change the value from 14px.
      .PopularPosts ul li a {font: 14px verdana; color: black;}
      Put a value between 10-14.

      Delete
  7. nice info (Y)
    http://bahanobatalami.blogspot.com/

    ReplyDelete
  8. Thanks for this! It looks great on my blog. :)

    ReplyDelete
  9. SO GOOD .
    http://shiningweb.blogspot.com/

    ReplyDelete
  10. Thanx

    www.incomputerking.tk

    ReplyDelete
  11. great article. thanks for sharing. www.jivansutra.com

    ReplyDelete
  12. awesome post great article brother

    www.codertrick.com for free recharge code

    ReplyDelete
  13. Nice post. i am alresdy used my blogs. you will also share Recent Post widget.

    ReplyDelete
  14. Thanks for this tip!! love learning more about blogger!
    Take look at Blogger Tips and Tricks

    ReplyDelete
  15. thank you for this tips
    www.eachlifestyle.com

    ReplyDelete
  16. thanks a lot it realy worked :) you can check out at Recipes Passion i have increased its size as well :)

    ReplyDelete
  17. hi Anjana Narayanan i have a question how to add share button under blog post in page when we share that post on facebook the picture showing upload with this post in page

    ReplyDelete
    Replies
    1. Hi Amir, please navigate to the Layout section of your Blog's Dashboard. Click Blog Posts --> Edit. Put a check mark for "Show Share Buttons" and click Save. I hope this is what you mean.

      Delete
  18. good post
    but can i change the backdround colour
    from lite blue to purple

    ReplyDelete
    Replies
    1. Sure Sajid. I guess you are talking about the template's background color. From your Blog's Dashboard navigate to Template > Customise > Advanced > Background. Now you can change the background color.

      Delete
  19. Thanks so much! But it's not working on my blog.

    liz @ sundays with sophie

    ReplyDelete
  20. Nevermind got it to work! I had to close the previous CSS code

    ReplyDelete
  21. Also what are you using to show you're "you may also like" posts?

    ReplyDelete
  22. how can we get a more visitors for our site

    ReplyDelete
  23. Dear Mam

    I add the widget of P.Post
    copied and pasted your css code into the Add CSS coloumn
    and Create some new post for testing
    but tell me how my all 5 to 10 post will see there in sequence with there heading

    ReplyDelete
  24. How to add multiple css .I have my signature code there aleady ..
    www.thegirlskorner.blogspot.in

    ReplyDelete
  25. Thank You very Much for Your help. Nice article, It's definitely gonna help the new blogger like me.
    THANKS

    ReplyDelete
  26. These are very good..Thank you!

    ReplyDelete
  27. thx for these simple codes. finally! a newbie also can design his blog.

    ReplyDelete
  28. I want popular post wedgiths

    ReplyDelete
  29. thanx i paste your code on my website - http://www.gamestook.com/2017/05/captain-marvel-movie-cast-trailer-release-date-and-wiki.html

    ReplyDelete

Your comments are always appreciated! However advertisements will not be approved. Thanks.