"Adicionar V2"... "Estilo Popular Posts"..." Widget" " Com Multi Color"... "Para Blogger"

Add V2 Style Popular Posts Widget With Multi Color For Blogger

This is about Popular post widget. Actually
earlier i posted about How To Add Multi-Color 
Popular Posts Widget For Blogger. So this is
also same, But, this design is different, Its
look Like round corners. You can add this effect
with easily,You can try it.

1. Log in to blogger account & Go to Design >> Edit HTML

2. Find this code  by using Ctrl+F  ]]></b:skin>

3.Paste below code Before ]]></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: 13px; 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: none !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}

4. Now Click  Save Template.
    You are done...

fonte: bloggertrix

traduzido:

"Adicionar V2 

Estilo Popular Posts Widget 

Com Multi Color Para Blogger"

Este é widget post sobre Popular. Na verdade, 
mais cedo eu postei sobre como adicionar Multi-Color 
Mensagens Popular Widget para Blogger. Portanto, este é 
também mesmo, Mas, este projeto é diferente, seu 
olhar como cantos arredondados. Você pode adicionar este efeito 
com facilidade, você pode experimentá-lo.

. 1 Efetue login na conta blogger & Go para projetar >> Editar HTML 

2. Encontre este código  usando Ctrl + F  ]]> </ b: skin> 

3. Cole o código abaixo antes de ]]> </ b: skin> código:

# 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: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 0px 0px 40px; min-height: 30px; órfãos: 2; padding: 0px; text-align:-webkit-auto, text-decoration: nenhum importantes; text-indent: 0px; text-transform: none; white-space: normal; viúvas: 2; palavra -spacing: 0px;}
# PopularPosts1 ul li
# PopularPosts1 ul li: first-child: em seguida,
# PopularPosts1 ul li: first-child + li: depois,
# PopularPosts1 ul li: first-child + li + li: depois,
# PopularPosts1 ul li: first-child + li + li + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li: after {position: absolute; top: 10px; direita: 5px; border-radius: 50%; margem: 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; tipo list-style: 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}

4. Agora Clique em  Salvar modelo.
    Está feito ...