Advertisement

sexta-feira, 23 de dezembro de 2016

Popular post number increment collor widget

blogger untuk pemula widget sidebar

Hoje vamos apresentar esse widget onde pode ser conferido no blog  https://comodefinirocorpo.blogspot.com.br/ isso tem uma harmonia de cores bem como isso serve para torar mais leve o template e mais atrativo para adicionar isso a seu template siga os passos abaixo:

Adicionando novo popular post nunber increment collor widget na sidebar do Blogger

Primeiro faça login no blogger va no menu layout na sidebar do seu template procure por popular post então deixe as caixas desmarcadas como mostra a figura abaixo e salve isso.

popular post increment blogger widget tuahk mbs
Clique em salvar 

Então agora va no menu modelo com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e logo acima disso copie e cole o código :

Nota: Se você ja tem outro código CSS de popular post remova isso para colocar o novo



/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}
.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
.PopularPosts ul li {margin:0;padding:.5em 0 .5em 2.7em !important;
counter-increment:num;position:relative;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#000 !important;
text-decoration:none;}
.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;
color:#fff !important;width:32px;height:32px;line-height:22px;text-align:center;top:10px;left:0px;padding:5px !important;border-radius:100%}

.PopularPosts ul li span:before{content:'';height:2px;width:0;position:absolute;bottom:0;left:0;transition:all .3s ease-out;display: inline-block;clear:initial;padding-top:2px}
.PopularPosts ul li span:hover:before{width:100%}

/* Set color and level */
.PopularPosts ul li:nth-child(1):before,.PopularPosts ul li span:nth-child(1):before {background-color:#e39f9a;margin-right:2%}
.PopularPosts ul li:nth-child(2):before,.PopularPosts ul li:nth-child(2) span:before {background-color:#56bfaf;margin-right:2%}
.PopularPosts ul li:nth-child(3):before,.PopularPosts ul li:nth-child(3) span:before {background-color:#ffd452;margin-right:2%}
.PopularPosts ul li:nth-child(4):before,.PopularPosts ul li:nth-child(4) span:before {background-color:#de5233;margin-right:2%}
.PopularPosts ul li:nth-child(5):before,.PopularPosts ul li:nth-child(5) span:before {background-color:#ffb64f;margin-right:2%}
.PopularPosts ul li:nth-child(6):before,.PopularPosts ul li:nth-child(6) span:before {background-color:#7fc783;margin-right:2%}
.PopularPosts ul li:nth-child(7):before,.PopularPosts ul li:nth-child(7) span:before {background-color:#29b9f2;margin-right:2%}
.PopularPosts ul li:nth-child(8):before,.PopularPosts ul li:nth-child(8) span:before {background-color:#78929c;margin-right:2%}
.PopularPosts ul li:nth-child(9):before,.PopularPosts ul li:nth-child(9) span:before {background-color:#37a3a0;margin-right:2%}
.PopularPosts ul li:nth-child(10):before,.PopularPosts ul li:nth-child(10) span:before {background-color:#74dbc2;margin-right:2%}

Salve e pronto veja o resultado.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

Hello, how may we help you? Just send us a message now to get assistance.