Popular Post widget Numbered para Blogger V2.5


popular post kang flury terbaru indo for blogger
                                                             
                                                                  DEMO

Popular post widget numbered para blogger v 2.5 é um widget interessante uma vez que podemos colocar na sidebar do Blogger para dar maior visibilidade as postagens em destaque onde estão os post mais visualizados então se você deseja adicionar isso  a seu template siga os passos abaixo:


Como adicionar o widget no blogger

faça login no blogger então va no menu tema editar HTML com as teclas combinadas CTRL+F busque por : popular ou popular post então exclua o código CSS e substitua por o código abaixo mostrado


/* Popular Post */
.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;    position: relative}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:0px solid #f2f2f2}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:#333333;font-weight:400;font-size:20px;line-height:1.4em;transition:color .3s}
.PopularPosts ul li a:hover{color:#FF4400}
.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: "";
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
#PopularPosts1 {background:#fff;}
#PopularPosts1 ul li:first-child{border-top:none;}
#PopularPosts1 ul li{padding:10px 0 11px !important;margin:0;list-style:none;border-bottom:solid 1px #f0f0f0;font-size:bold 11px;line-height:normal;}
#PopularPosts1 li {padding-right:1em !important;padding-left:1em !important;}
.PopularPosts li:nth-child(odd) {background:#fff;}
.PopularPosts li:first-child {border-top:1px solid #e3e3e3;}
.popular-posts ul li {border-bottom:1px solid #e3e3e3;list-style:none outside none !important;margin-left:0 !important;overflow:hidden;padding:10px 0 !important;transition:all 0.25s linear 0s;counter-increment:trackit;}
#PopularPosts1 ul {list-style-type:none;margin:0;padding:0;}
.PopularPosts ul li:before{content:counters(trackit, ".");
padding:15px 0;left:0px; top:0px;line-height:1;font-size:35px;width:60px;height:100%;font-weight:normal;text-align:center;color:#fff;float:left;background:#71c4d6;margin-right:10px;border-right:1px solid #fff}

Salve isso

Então va no menu layout localize o widget popular post e deixe a caixa desmarcada de miniaturas de imagem conforme mostrado abaixo:

config widget touch blogger commung absdfi



Obs: Você pode configurar o widget da maneira como desejar trocar a cor tipo de fonte tamanho basta modificar o código CSS acima 

Click to comment