Baú da Dri um blog descontraído com receitas diversas , casa e astral , dicas e personalizações para blogs , brindes ,artesanato decorativas , porcelanas e muito mais!

4 de novembro de 2019

Personalizando as Postagens Populares


Personalizando as Postagens Populares 3 Modelos


Bom dia amigo leitor hoje venho trazendo a personalização das postagens populares do blog  ou as mais vistas .

personalizando postagens populares


Eu acredito que as postagens populares\mais vistas , é um dos gadgets mais importantes para se ter no blog , assim eu separei quatro modelos para vocês testarem aquele que combina mais com seu blog.


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 , que estão precedidas por ( # ) , 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.

Exemplo

postagens mais vistas personalizada
Por hoje é só , que algum tutorial especifico deixe seu pedido .
Curta , compartilhe ajude o blog a crescer.

Nenhum comentário:

Postar um comentário

Gostou do Post , deixe seu comentário e sugestões .
Em breve responderei a todos.

Copyright © Blog de Variedades Baú da Dri Design by Adriana Bentim | Tecnologia do Blogger