To Get This Colorful Widget Just Follow The Below Steps
- Go To Blogger Dashboard ---> Template ---> Edit Html
- Find ]]></b:skin> Then Add Below Code Just Before ]]></b:skin>
.mostpopular {
list-style: none outside none;
margin: 0.3em 0 !important;
padding: 0;
}
.mostpopular_li {
background-image: none !important;
border: 0 none;
list-style: none outside none !important;
margin: 0 0 -7px !important;
padding: 13px 0 8px 8px !important;
position: relative;
width: 100%;
}
.mostpopular_li.color0 {
background-color: #EE5826 !important;
width: 100%;
}
.mostpopular_li.color1 {
background-color: #27B6E2 !important;
width: 93%;
}
.mostpopular_li.color2 {
background-color: #C5E627 !important;
width: 89%;
}
.mostpopular_li.color3 {
background-color: #FF6F51 !important;
width: 84%;
}
.mostpopular_li.color4 {
background-color: #D59B8E !important;
width: 80%;
}
.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {
background-color: #888888 !important;
width: 74%;
}
a.barlinko {
background: none repeat scroll 0 0 transparent;
display: block;
font: italic 13px georgia,serif;
margin: 0 6px 0 0;
padding: 0;
text-decoration: none !important;
}
a.barlinko:hover {
color: #FFFFFF;
}
.barco {
display: block;
right: 0;
}
.mostpopular_li img {
margin-top: 15px;
position: absolute;
right: 5px;
}
a.thethingwithc {
border: 0 none !important;
color: #FFFFFF !important;
display: block;
font-family: arial;
font-size: 11px;
font-weight: bold;
padding: 0 9px 0 0;
text-align: right;
text-decoration: none !important;
}
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div id='sidebartitlewrapper'>
<b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>
</div>
<div class='sectioncont'>
<ul class='mostpopular'>
<script type='text/javascript'>
//<![CDATA[
var i=0;
//]]>
</script>
<b:loop values='data:posts' var='post'>
<script type='text/javascript'>
//<![CDATA[
document.write ('<li class="mostpopular_li color'+i+'">');
var i= i +1;
//]]>
</script>
<a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
<span style='display: inline-block;width:100%;'>
<span style='float: left;font-size:10px;color:#f5f5f5;'> </span>
<span class='cb'/>
</span>
<script type='text/javascript'>
//<![CDATA[
document.write ('</li>');
//]]>
</script>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<div id='sidebartitlewrapper'>
<b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>
</div>
<div class='sectioncont'>
<ul class='mostpopular'>
<script type='text/javascript'>
//<![CDATA[
var i=0;
//]]>
</script>
<b:loop values='data:posts' var='post'>
<script type='text/javascript'>
//<![CDATA[
document.write ('<li class="mostpopular_li color'+i+'">');
var i= i +1;
//]]>
</script>
<a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
<span style='display: inline-block;width:100%;'>
<span style='float: left;font-size:10px;color:#f5f5f5;'> </span>
<span class='cb'/>
</span>
<script type='text/javascript'>
//<![CDATA[
document.write ('</li>');
//]]>
</script>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
4. Save The Template And Click View The Blog
Click on the wrench icon in the right corner of widget
