Saturday, 3 January 2015

5 Different Types of Popular Posts Widget For Blogger With Tumbnails

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. 
5 Different Types of Popular Posts Widget For Blogger With Tumbnails

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.

5 Different Types of Popular Posts Widget For Blogger With TumbnailsStep II: Adding CSS



  •  Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
  • Save Template

  • ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    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);}

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Previous Post
    Next Post

    post written by: