How to Make Coloured Popular Post In Blogger

what are popular post

popular post are the gadget in blogger and
it show what is popular in a blog. you can
customize it as you want . mostly when you
add a gadget of popular post given by blogger
it was not very awesome and good looking.
and you want to make beautiful colour popular 
post you many need a little effort. 
you need you do some  simple steps
just paste some of code in your html and you 
will get coloured popular post widget as you 
can see below.

 how to add colour popular post in blogger

go to template and edit html and jump and expand

widget.

step1: search for this

/* Variable definitions

steps2: if you have no find it paste it below this

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

and end it with this code


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

copy and paste the code given below 

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

search this code

]]></b:skin>

paste the following code before that

#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}

now find this code 

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

and delete untill </b:widget> but do not
delete </b:widget>. now paste given code above
</b:widget> 


<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/AVvXsEjwAu_TM0WyWW59avfqM5mDigHHvJsCVYQ9Bwk6aaI8OcaUAWF5OMeG1DinpZupqaQ0As8gDhYYCa0eeO_exxEL9jZVi658Cxvg1LiWiC_E6t-n206gNHGEad0t2kHu7tmi3k_jAqyCFzU/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/AVvXsEjwAu_TM0WyWW59avfqM5mDigHHvJsCVYQ9Bwk6aaI8OcaUAWF5OMeG1DinpZupqaQ0As8gDhYYCa0eeO_exxEL9jZVi658Cxvg1LiWiC_E6t-n206gNHGEad0t2kHu7tmi3k_jAqyCFzU/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>

now save template and you complete the process
vist your blog and you see coloured  popular
post