Multicolored Popular Post for Blogger

After a short break, I have come with a awesome Multicolored Popular Post widget just similar to WordPress Popular Post Widget. You have seen this widget in Many WordPress Blog and Its not a Free Widget. In last days I was busy with this widget and Finally make this for Blogger Blog Free of Cost. I tried my level best to give the look same as WordPress Popular Post Widget. . It really attract Visitor to visit your popular posts. This Poplar Post widget have three options just similar in Default Popular Post Widget of Blogger. Here i will tell you every steps one by one and I made it very simple, to add this widget in any blogger blog.

Various Options in this Popular Post Widget

• Display Only Title of The post
• Display Title with Post Image Thumbnail and
•  Display Title along with Post Snippets.

Adding this widget in your is very Simple, Just Follows the Simple Steps.






Note: Before Adding this Widget in Blog, Please Remove the Default Popular Post Widget From your Blog, If you are using otherwise Go to steps.

Steps to Add Multicolored Popular Post Widget

1. Go to Blogger > Design > Edit HTML
2. Backup Your Template
3. Expand the Widget Template
4. Search For this Code 

 /* Variable definitions

paste the Following Code Just below it.

<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"/>
<Variable name="PopularPosts.background.color6"
description="background color6" type="color" default="#ff0"
value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7"
description="background color7" type="color" default="#ff0"
value="#f6993d"/>
</Group>

 5. Now, Search  ]]></b:skin>


Paste the Following Code just above it.

#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 + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + 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}#Probloggingtools{}
#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}

 6. You have almost done.  Now Search For the Following code or Just Similar to this

<b:section class='sidebar' id='sidebar'> 

Paste the Following Code Just Below it.

<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/AVvXsEi6CSUIqXf8Ime8r4kg17WkqRtQTtJCEXirulD4Ry6YbQyIPVkFADB7jkxpxeY9Y7sE9emdDyh2Wa4APg0fN_3i0HQsrHfgDhyGE2xjtFMcqkaF4ylKSDUjZn2IeOmR7b1Etrf3jccf3MY/s1600/defaultimage.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/AVvXsEi6CSUIqXf8Ime8r4kg17WkqRtQTtJCEXirulD4Ry6YbQyIPVkFADB7jkxpxeY9Y7sE9emdDyh2Wa4APg0fN_3i0HQsrHfgDhyGE2xjtFMcqkaF4ylKSDUjZn2IeOmR7b1Etrf3jccf3MY/s1600/defaultimage.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>  

   7. Done! Save your Template and Visit your Blog to See This Awesome Popular Post Widget