Adding a Multi-Colored Popular Post Widget

The popular post widget is one of the most widely used widgets in Blogger. Here’s another one with a little more funk to its normal look. It is created by the guys at BeautifulBloggerWidgets and I’m pretty sure you’ll like this feature.
Here are the steps on how you can add this:

1. Go to Blogger Dashboard > Template > Edit HTML
2. Click the Expand Widget Template check box
3. Find code below

/* Variable definitions

====================

4. Copy and paste code provide below just 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 ]]></b:skin> tag and add 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: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}

6. Look for this code or one that’s similar to it

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

7. Copy and paste the code below

<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/AVvXsEjIzR2YrJEK0iR2i6hSwQrfA4IkWV8I19CECA18Y4wSdTd6RGQCFTLj0ZB5Mi25IWUKC8JSBQRfpd7WE4bao80oWEtzTW_a3EtOpdEN4tMsKlk5iFhWCcYdkI_MLw12KqeN5liUl1CtCZk/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/AVvXsEjIzR2YrJEK0iR2i6hSwQrfA4IkWV8I19CECA18Y4wSdTd6RGQCFTLj0ZB5Mi25IWUKC8JSBQRfpd7WE4bao80oWEtzTW_a3EtOpdEN4tMsKlk5iFhWCcYdkI_MLw12KqeN5liUl1CtCZk/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>

8. Save template
Note: Save a backup first before you do any changes on your template.