Multi-colored Popular Posts

miercuri, noiembrie 20, 2013

Mai intai adaugati Popular Posts pe blog.
Tablou de bord
Adaugati un obiect gadget
Postari populare
Salvati

Multi-colored Popular Posts:

Tablou de bord
Sablon
Editati HTML
Ctrl+F (se va deschide casuta de cautare)aici tastati

Copiati codul de mai jos inainte de codul de mai sus:

#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:#ff4c54;width:97%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} 
#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:72%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} 
#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:#c7f25f;width:66%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;} 
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none} 
#PopularPosts1 img{ 
-moz-border-radius: 130px; 
-webkit-border-radius: 130px; 
border-radius: 130px; 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
transition: all 0.3s ease; 
padding:4px; 
border:1px solid #fff !important; 
} 
#PopularPosts1 img:hover { 
border-radius: 0 0 0 0; 
-moz-transform: scale(1.2) rotate(-711deg) ; 
-webkit-transform: scale(1.2) rotate(-711deg) ; 
-o-transform: scale(1.2) rotate(-711deg) ; 
-ms-transform: scale(1.2) rotate(-711deg) ; 
transform: scale(1.2) rotate(-711deg) ; 
}