Popular post number increment collor widget

- 17:11:00
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.
.


EmoticonEmoticon

 

Start typing and press Enter to search