3 Modelos para personalizar as postagens populares

 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.

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

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

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

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.