Add Multi Colored Popular Post Widget for Blogger | 2016

Add Multi Colored Popular Post Widget 2016 – Blogger is a one of the mostly used blogging platform by noobs and bloggers who do event blogging like experiments. Blogger has some of limitations that’s why the name of blogger come after WordPress (Self Hosted). But if you are new in blogging you can learn many more things from blogger like layouts, widgets, HTML/Java Scripts and more. Blogger allow users to add third party html/java script to to add in their blogs so there a large numbers of blogger widgets available on internet that make your blog very attractive and some of gadgets also optimize your blog speed and improve your SEO.

• Related : Add Ultimate SEO Friendly Meta Tags in Blogger

Now Today we are come to add multi colored popular post widget to blogger blog that make your blog more attractive and eager visitors to check your post. The color of the multi colored popular post widget is very eye catching so, visitor who surf your site also see in your sidebar and crawl more web page of your site it can help you to decrease your bounce rate. It is just made of simple CSS and combination of javascript code that you can add by following simple steps discussed below.

Steps To Add Multi Colored Popular Post Widget :

1. First of fall, go to your Blogger dashboard >> Layout >> Add an Element.
2. Then you see all widgets that is offered by blogger just choose “Popular Post Widget” from it.
3. Before saving it just unselect the option of thumbnail.
4. Now the real work is started here. Go to Template Tab >> Edit HTML.
5. Now You need to find ]]></b:skin> by pressing CTRL+F and paste this red code in it and hit enter.
6. After searching the code ]]></b:skin> you just need to paste the below code above the ]]></b:skin> code.

#PopularPosts1 ul li a:hover{
color:#fff;
text-decoration:none
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px; color: #333333;
display: block;
font-family: Georgia, ‘Times New Roman’, Times, serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
min-height: 30px; orphans: 2;
padding: 0px;
text-align: -webkit-auto;
text-decoration: bolt !important;
text-indent: 0px;
text-transform: none;
white-space: normal; widows: 2;
word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px
}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;right:5px;
border-radius:50%;
border:2px solid #ccc;
background:#353535;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{
position:relative;
margin:6px 0;
border-radius:25px 0px 25px 0px;
border:2px solid #f7f7f7;
-webkit-box-shadow:3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
padding:10px
}

After Pasting the code click on “Save template” and view your blog and see whats changes you made by add multi colored popular post widget. there are many more widgets that help your blog to look more attractive and improve your Blogger SEO. If you face any problem regarding this post just leave a comment below.