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.
Login to your Blogger Dashboard and Go to Template than click on edit HTML like as shown in below picture.
Step 2.
Now click on "Expand Widget Templates" as shown in below picture.
Step 3.
Search below code
/* Variable definitions
or
----------------------------------------------- */
or
<b:skin><![CDATA[/*
Step 4.
Copy below code and paste it to below 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>
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/AVvXsEgQnL7m6IKIuRSq_8hyD_3p6mPRGDrpxvWb9QpeKV_yRLBTarQRQm9TNsS-hiqdgLtMHE94UV73sPVelPSnajUkDJEIczg52FDjth-pXVc28DTw7LcnOnH4jOjZQ8RwWM9tneknY_8ECjI/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/AVvXsEgQnL7m6IKIuRSq_8hyD_3p6mPRGDrpxvWb9QpeKV_yRLBTarQRQm9TNsS-hiqdgLtMHE94UV73sPVelPSnajUkDJEIczg52FDjth-pXVc28DTw7LcnOnH4jOjZQ8RwWM9tneknY_8ECjI/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><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<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="Widget">Popular Posts Widget</a></div>
Step 10.
Now Save Template. Now go to Layout than edit link of Popular Post Widget.
Step 11.
Now set your post at display up to 5 posts as you want to show as shown in below picture.
Now you�re done. Refresh your blog to see popular post widget on your blog. You can also change the background of the Popular Post Widget.