Attractive Rainbow Colored Popular Posts Sidebar Widget For Blogger

Rainbow Colored Popular Posts Sidebar Widget for Blogger is Professional blogger first required today. Attractive blogger looks - Provides high traffic. Attractive looks of a blog are the main part of the blog. If you ignored on it, so could sustain substantial losses to you. So Friends never dropped our feature widget, pro widgets or Other Special Widgets, Which are very Helpful to attractive of your blog.

Rainbow Colored Popular Posts SideBar pro Widget: On the internet many people’s are searching daily rainbow Colored Pro Widget Sidebar for blogger.



Why? Because rainbow  Colored widget  provides attractive took to a blog. Today we Are presenting rainbow color pro widget for blogger with Special Mix Colored, Which is you will be like and it will provide  Spicy looks  of your blog.

Lets Know How it Will Provide Spicy Looks

Read Most Important:

•       30 Recommended Seo Tips
•       How to Add Author Box Below Posts in Blogger: Pro Widget
•       How to Add AdSense ADS Unit Code in Blogger Header

Blogger Dash Board Layout Setting

For adding rainbow colored in blogger First Step is Blogger Dashboard Layout Button.

So Press your Layout Button and add select or add gadget >>> then Popular Posts

While adding popular Posts rainbow widget for blog layout you have 2 options with thumbnail and snippets and without.

Add CSS Code Setting in Blogger Template

•           Find Out ]]></b:skin> Code by Pressing CTRL + F Button in Blogger Dashboard Template > Edit HTML

• Just Copy and Paste below code before ]]></b:skin>

---

[enter text here]

<----dynamotricks rainbow colored popular posts widget starts---->

.sidebar .PopularPosts .widget-content ul li{

height: 100

%;

l

ine-height: 22px;

float: left;

clear: left;

list-style-type: none;

overflow: hi

dden;

co

lor: gray;

}

.side

bar .PopularPosts .widget-content ul{

margin:0;padding:5px 0;list-style-type:none;}

.sidebar .PopularPosts .widget-content ul li{

position:relative

;

margin:5p

x

0;

bo

rder:0;

padding:10px;

opacity:0.8;

-webkit-transition:all 0

.4s;

-

moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s

;}

.s

idebar .PopularPosts .widget-content ul li:hover {

border-radius:30px 0px 0px 0px;

margin-left:10px;

opacity:1.0}

.sidebar .PopularPosts .widget-content ul li:first-child {

background:red;width:90%}

.sidebar .PopularPosts .widget-content ul li:first-child:af

ter{

c

on

tent:"1"}

.

sidebar .PopularPosts .widget-content ul li:first-child + li{

background:orange;width:80

%}

.s

idebar .PopularPosts .widget-content ul li:first-child + li

:after{

con

tent:"2"}

.sidebar .PopularPosts .widget-content ul li:first-child + li

+

li{

background:yellow;width:70%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:aft

er{

c

ontent:"3"}

.sidebar .PopularPosts .widget-content ul li:first-child

+ li +

l

i + li{

bac

kground:green;width:60%}

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li:after{

c

ontent:"4"}

.sidebar .PopularPosts .widget-content ul li:first-child + l

i +

li + li

+

li{

background:blue;

width:40%;

p

adding-right:20px;}

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li + li:after{

content

:"5"}

.si

debar .PopularPosts .widget-content ul li:first-chil

d + li +

li

+ li + li +li{

background:indigo;

width:30%}

.

sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li + li + li:after{

content:"6"}

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li + li + li +li{

background:violet;width:20%}

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li + li + li + li:after{

content:"7"}

.sidebar .PopularPosts .widget-content ul li:first-child:af

ter,

.sidebar .PopularPosts .widget-content ul li:first-child + li:afte

r,

.si

debar .PopularPosts .widget-content ul li:first-child + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li:after,

.sidebar .P

opularPosts .widget-content ul li:first-child + li +

li + li +

li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + l

i +

li

+ li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li +

li + li + l

i + li + li:after

{

position:absolute;

top:15px;

right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;

font-siz

e:22px;

color:#fff;

}

.sidebar .PopularPosts .widget-content ul li .item-thumbnail{

float:left;

border:0;

margin-right:10px;

background:transparent;

padding:0;

width:30px;

height:90p

x}

.sid

ebar .PopularPosts .widget-content ul li a{

font-size:12

px;

f

ont-weight:bol

d;

color:

white;

text-decoration:non

e;

t

ext-shadow:0px 0px 6px

white;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;

}

.sidebar .PopularPosts .widget-content ul li a:hover{

color:blac

k;

text-decoration:none;

text-shadow:1px 1px 1px white;}

<----dynamotricks rainbow colored popular posts widget ends---->

 

Now Save Blogger Template Process are completed.