Aplique um novo estilo às postagens populares do blog e modernize esse widget tão utilizado que exibe seus melhores artigos.
O widget post populares tem uma função definida e conhecida por todos, exibir aquelas postagens que são as mais visitadas de seu blog e “nada além disso”. Porém, sua importância se torna imensa já que esses artigos são os que chamam mais atenção. Deixar esse widget com um novo e moderno estilo é como se fosse uma “obrigação” para todo blogueiro, só que muitas vezes excedemos em modificações e acabamos “piorando” seu design.
Para ser mais claro, em muitos casos é melhor a simplicidade ao exagero. Mas, ser simples não quer dizer ser feio e por isso um toque mínimo aliado a escolha certa pode fazer toda a diferença nesses casos.
Personalizar Posts Populares com Design Simples e Bonito
Nesse artigo, trazemos mais uma maneira de personalizar o widget postagens populares no blog. Com esse novocódigo, as postagens mais visitadas ganharão um maior destaque graças a possibilidade de contraste de cores, que intercalarão entre duas opções aplicadas a ordem de ímpar e par, cores essas, que poderão ser a que desejar. Outro ponto importante, é que esse estilo fica bem minimalista, ou seja, para aqueles que não gostam de estilos muito extravagantes e preferem algo mais simples, porém sem deixar de ser bonito, esse código é uma ótima opção.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Como Colocar Posts Populares com Estilo Personalizado no Blog
>> Acesse seu Blogger e vá em "Layout".
>> Clique em "Adicionar um gadget" e escolha "Postagens Populares".
>> Escolha as configurações desejadas, clique em "Salvar" e depois "Salvar Organização".
>> Agora clique na opção "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul { padding-left: 0;
counter-reset: trackit;
}
.popular-posts ul li {
border-bottom: 1px solid #ffffff;
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;
}
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #ffffff;
float:left;
margin-right:10px;
}
.PopularPosts li:first-child{
border-top:1px solid #000000
}
.PopularPosts li:nth-child(even){
background:#2C87F0
}
.PopularPosts li:nth-child(odd){
background:#000000
}
.PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet {
display: true!important}
.PopularPosts a{
text-decoration:none !important;
}
.PopularPosts a, .PopularPosts a:hover{
color:#ffffff!important;
font-size:.9rem
text-decoration:none;
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}
Configuração:
* Destacado em AZUL, cor da numeração dos itens.
* Destacado em AMARELO, estilo da borda superior dos itens.
* Destacado em LARANJA, cor de fundo dos itens com numeração par.
* Destacado em VERDE, cor de fundo dos itens com numeração ímpar.
>> Clique em "Visualizar", se estiver como deseja clique em "Salvar Modelo".
>> Vá em seu blog e veja como ficou.
Com a conclusão do tutorial seu blog contará com um modelo mais elegante do widget postagens populares e com a configuração correta, também aliado e beneficiado com suas cores favoritas. Entretanto se o visual não ficou como no nosso exemplo, seu blog utiliza um template já personalizado e com isso será necessário encontrar o estilo CSS antigo utilizado e removê-lo.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
0 comentários:
Postar um comentário