Widget de postagens populares com numeração para blog
 |
| Widget de postagens populares com numeração para blog |
Hoje trazemos uma belo Widget que mostrar as postagens mais populares em seu blogger, juntamente com a numeração das postagens. Além de deixar seu tema elegante, isso irá melhorar a navegabilidade - se é que essa palavra existe - de seus leitores, o que faz com eles fiquem mais tempo em seu site e consequentemente gere mais visitas. Dito isso, vamos ao que interessa.
WIDGET POSTAGENS POPULARES COM NUMERAÇÃO:
1. Faça login no blogger e clique em Editar HTML do blog que você deseja adicionar o Widget
2. Clique em CTRL F e pesquise por: </style> e antes dessa tag cole o seguinte código:
/*---- Popularpost ----*/
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none}
.PopularPosts .widget-content ul li{margin:0 0 10px;padding-bottom:10px;position:relative;overflow:hidden}
.PopularPosts .widget-content ul li .item-title{line-height:1.4em;padding:6px 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{font-size:14px;font-weight:700;color:#111}
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{color:#aaa}
.PopularPosts .widget-content ul li img{width:130px;height:90px;padding-right:0;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-filter:brightness(.8);filter:brightness(.8)}
.Label li,.Label li a{position:relative;color:#444;transition:all .3s ease-out}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:130px;height:90px;overflow:hidden}
.PopularPosts .widget-content ul li img:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;left:5px;top:10px;z-index:51;transition:all .4s;height:20px;min-width:20px;border-radius:50px;font-size:15px;background:red;font-weight:500;text-align:center;padding:3px;overflow:hidden}
.PopularPosts ul{counter-reset:count}
.PopularPosts .item-control,.PopularPosts .item-snippet{display:none}
3. Salve.
4. Feito isso, vá no Layout do blogger e adicione O Widget de postagens populares e configure como quiser, assim como mostramos abaixo:
 |
| Widget de postagens populares com numeração para blog |
6. Salve e veja o resulta.
Observação :
O Código CSS, caso você entenda, pode ser alterado do seu gosto para que combine mais com o seu blog.