Popular Post Widget for Blogspot/Blogger

Popular post widgets - In this popular post you will learn how to add beautiful, updated & multi-colored popular post widgets in blogspot blogs.

The above image is showing the layout of the the popular post widget. Here in this widget you will find some options to show your popular posts according to ...

1. Popular posts for last 7 days.
2. Popular posts for last month &
3. Popular posts for all the time.

Otherwise there are some other options like ...

1. You can display only the title of the Popular Posts.
2. Display title with images.
3. Display Title along with post snippet.

Now, follow the following instructions to add the Popular post widget in your blogger blogs.

1. Go to Blogger → Template → Edit HTML → Proceed
2. Expand the Template checking the expand box.
3. Now, find (Ctrl + F) for below code in your template.

/* Variable definitions
   ====================

4. Copy the code below and paste the code just above/ after the above code.
   

   <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
   <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
   <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
   <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
   <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
   <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
   </Group>

5. Find (Ctrl+F) the following code
   

   ]]></b:skin>

6. Now add the following code just above the ]]></b:skin> code.
   

   #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
   #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
   #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
   #PopularPosts1 ul li:first-child:after{content:"1"}
   #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
   #PopularPosts1 ul li:first-child + li:after{content:"2"}
   #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
   #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
   #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
   #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
   #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
   #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
   #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
   #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
   #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
   #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

7. Find the following code or, something similar to this ...
   

   <b:section-contents id='sidebar-right-1'>

8. Paste the following code just after the above code.
   

   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
      <b:if cond='data:title'>
       <h2><data:title/></h2>
      </b:if>
      <div class='widget-content popular-posts'>
       <ul>
        <b:loop values='data:posts' var='post'>
         <li>
          <b:if cond='data:showThumbnails == &quot;false&quot;'>
           <b:if cond='data:showSnippets == &quot;false&quot;'>
            <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
           <b:else/>
            <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
           </b:if>
          <b:else/>
           <b:if cond='data:showSnippets == &quot;false&quot;'>
            <b:if cond='data:post.thumbnail'>
             <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
            <b:else/>
             <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqczjeO4LBFerM1OdwiLANn2Utu8Pg8xA0NeFVN4mEh5xV7hGuImAZSoyvvPgIUBGLmw_oQxMl9wn29bsxlKs_kP0i05Uyl8xFHor9rv8TeHxUB3P7ZiswuZEMMvBBAVLpZmAyX-dnrA/s1600/default.jpg'/>
            </b:if>
            <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
            <div class='clear'/>
           <b:else/>
            <b:if cond='data:post.thumbnail'>
             <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
            <b:else/>
             <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqczjeO4LBFerM1OdwiLANn2Utu8Pg8xA0NeFVN4mEh5xV7hGuImAZSoyvvPgIUBGLmw_oQxMl9wn29bsxlKs_kP0i05Uyl8xFHor9rv8TeHxUB3P7ZiswuZEMMvBBAVLpZmAyX-dnrA/s1600/default.jpg'/>
            </b:if>
            <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
            <div class='clear'/>
           </b:if>
          </b:if>
         </li>
        </b:loop>
       </ul>
      </div>
     </b:includable>
   </b:widget>

9. Now, save the Template.
10. You are almost done. Let me know if you feel any problem using this widget. Post a comment below this post so that I can solve your problem. Thanks.