26 outubro 2021

Personalizando as postagens populares do blog, 3 modelos para você escolher

em 26 outubro 2021

Tempo de leitura:

 Bom dia, amigos leitores!


Hoje vamos a mais uma personalização para blogs do Blogger, é dia de deixar o gadget das postagens populares mais atraente e elegante.


Como o nome já diz, postagens populares do blog, ou seja, as que são mais vistas pelo seu público.


Personalizando as postagens populares do blog, 3 modelos para você escolher


Se não instalou o gadget das postagens populares adicione ele ao blog, marque quantos posts você deseja que apareça, se deseja resumo ou só o título.

Não se esqueça de fazer um backup no seu tema ou usar o blog de teste que particularmente acho mais indicado para aplicar a personalização e realizar os ajustes.


Então sem mais delongas vamos a nossa personalização, começando pela mais simples.


Vá em tema editar HTML de um ctrl e procure por ]]></b:skin:  acima desse fechamento cole o código abaixo: 


1° modelo 


 #PopularPosts1 .widget-content, #PopularPosts1 ul{widht:136;height:220;}  #PopularPosts1 .item-content{background:#fffafc;color:#6e688d;font-size:12pt;text-align:left;margin-bottom:16px;padding:12px;} #PopularPosts1 a {color: #403c52;} #PopularPosts1 a:hover { color: #ffbbc1;text-decoration: underline;} #PopularPosts1 img{padding:4px 10px 4px;magin:4px 6px 6px;float:top;border-radius:88px;}#PopularPosts1 a:hover{filter:grayscale(66%);}

Exemplo
postagem popular personalizado

Esse é o modelo mais simples de colocar, vamos ao que você pode editar para ficar com a aparência do seu blog. 

Troque as cores, pelas cores que combinem com seu tema, aqui você encontrará uma Tabela de cores e como usar o background.

Se desejar trocar as fotos arredondadas por quadradinhas troque o trecho border-radius 88px, por border none, não apague nada mais, além disso. 

Visualize estando tudo certo salve.

Vamos ao segundo modelo, esse modelo você deve instalar acima do fechamento </body>  então procure por ele na caixinha que já citei acima e cole o código, visualize estando certo salve.



Modelo 2




<style type='text/css'>.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#ffedff;}.sidebar .PopularPosts ul li:first-child + li{background:#fce5cd;}.sidebar .PopularPosts ul li:first-child + li + li{background:#ffdab9;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#ccccff;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#fffafc;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}</style>

Da mesma forma do anterior troque as cores pelas que combinem com seu layout, você pode selecionar para aparecer até cinco postagens.


Exemplo

postagens populares personalizadas



Modelo 3



<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px &#39;Oswald&#39;, sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:&quot;&quot;;height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
</style>

Esse modelo também dever ser instalado igual ao modelo 2, não deve ser alterado, é igual ao que uso aqui no blog.

Exemplo

postagens mais vistas personalizada
Por hoje é só, essa é uma semana meio corrida, se desejar algum tutorial específico deixe seu pedido aqui nos comentários.

Mas antes de partir não se esqueça de assinar para receber as postagens fresquinhas em sua caixa de correio eletrônico.


Nenhum comentário:

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.

Confira também, outros artigos: