Multi Colored Popular Posts Widget To Blogger

Multi Colored Popular Posts Widget to Blogger is a widget that provides most popular posts of your blog. Most popular widget displays the m... thumbnail 1 summary

2:20:00 PM

Multi Colored Popular Posts Widget to Blogger is a widget that provides most popular posts of your blog. Most popular widget displays the most views posts on the blog in last 24 hours, last 7 days, last month or all times. You can set most popular widget to title only mode, title with thumbnail mode or title with posts excerpts mode. To get this widget to your blog we have to change some CSS codes in our blogger templates.

How to Add Multi Colored Popular Posts Widget to Blogger

You can add Multi Colored Popular Posts Widget to Blogger with follow some easy steps that are given below:

Step 1.

Step 2.

Now click on "Expand Widget Templates" as shown in below picture.

Tips: Before editing templates please backup your template if you don't know how to backup your template than read our tutorial about Howto Backup your Blogger Template.

Step 3.

Search below code

/* Variable definitions

----------------------------------------------- */

<b:skin><![CDATA[/*

Step 4.

Copy below code and paste it to below above code.

Step 5.

Now search following code:

]]></b:skin>

Step 6.

Now copy below code and paste it to before above 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}

Step 7.

Search following code

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

Step 8.

Now delete it when you reach at this tag

<b:widget>

Step 9.

After delete this codes please paste following codes in place of this:

<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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 == "false"'>
<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/AVvXsEj-Oj5ec8LnfKERTsEd_wHj8-4pSzJL2e04vkVV7B0dttsg_SpHRhZJGbMur3fY64XzfxmPLeB3OFxNgbmUiaK_a8PSGWKCDmEuQvcv6d_R44y-agRt8iMYdr4i6SxqRJh0RmM6m52OEgE/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/AVvXsEj-Oj5ec8LnfKERTsEd_wHj8-4pSzJL2e04vkVV7B0dttsg_SpHRhZJGbMur3fY64XzfxmPLeB3OFxNgbmUiaK_a8PSGWKCDmEuQvcv6d_R44y-agRt8iMYdr4i6SxqRJh0RmM6m52OEgE/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>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.haakblog.com/2013/06/multi-colored-popular-posts-widget-blogger.html" target="_blank" title="Popular Posts Widget">Popular Posts Widget</a>
<a href="http://www.haakblog.com/" target="_blank" title="Blogger Tutorial">Popular Posts Widget</a></div>