5 Estilos de Postagens Populares para Blogger (CSS)

maio 17, 2017


Konnichiwa fadinhas & elfos! Como estão? Ter postagens populares é essencial para todos os blogs, uma das coisas que não pode faltar! Hoje trago 5 estilos personalizados de postagens populares que você pode adicionar ao seu blog, tenho certeza que vai adorar então.. Let's go!




Lembrando que para você poder ver, vai precisar que já tenha o Gadget de postagens populares na sidebar, para adicionar vá em Layout, adicionar um Gadget e adicione a Postagens mais visitadas, você pode configurar ao seu gosto a personalização irá funcionar do mesmo jeito, mas recomendo que deixe em ''tudo'' e no máximo 5 . 


Vamos lá!


Levemente transparente 
<style type='text/css'>

.sidebar .PopularPosts ul {

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

list-style: none !important;

padding: 0 !important;

margin-bottom: 10px;

}

.sidebar .PopularPosts .item-thumbnail {

height: 190px;

margin: 0;

overflow: hidden;

width: 100%;

}

.sidebar .PopularPosts .item-title {

position: relative;

}

.sidebar .PopularPosts img {

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-title a {

color: #FFFFFF;

font: 15px &#39;Oswald&#39;, sans-serif;

text-transform: uppercase;

font-size: 20px;

padding: 20px;

position: absolute;

right: 0;

left: 0px;

margin: 0px auto;

text-align: center;

text-decoration: none;

top: 40px;

width: 60%;

height: 26px;

overflow: hidden;

z-index: 2;

}

.sidebar .PopularPosts .item-snippet {

background: rgba(0, 0, 0, 0.35);

border-top: 6px solid rgba(0, 0, 0, 0.1);

border-bottom: 6px solid rgba(0, 0, 0, 0.1);

color: #FFFFFF;

left: 0px;

right: 0px;

margin: 0px auto;

padding: 65px 10px 10px;

position: absolute;

font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;

text-align: center;

top: 35px;

width: 60%;

z-index: 1;

}

.sidebar .PopularPosts .item-content {

position: relative;

}

</style>










Minimalista 
 <style type='text/css'>

.sidebar .PopularPosts ul {

counter-reset: popularcount;

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

width: 100%;

list-style: none !important;

padding: 0 !important;

margin-bottom: 20px;

position: relative;

border: 0;

}

.sidebar .PopularPosts .item-thumbnail a {

clip: auto;

display: block;

height: auto;

height: 120px;

}

.sidebar .PopularPosts .item-thumbnail {

width: 100%;

position: relative;

margin-bottom: 15px;

}

.sidebar .PopularPosts .item-thumbnail::before {

background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

border-bottom: 29px solid #fff;

border-left: 29px solid transparent;

border-right: 29px solid transparent;

bottom: 0px;

content: &quot;&quot;;

height: 0;

width: 0px;

left: 0px;

right: 0px;

margin-left: auto;

margin-right: auto;

position: absolute;

z-index: 3;

}

.sidebar .PopularPosts .item-thumbnail:after {

color: #000;

content: counter(popularcount, decimal);

counter-increment: popularcount;

font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;

list-style-type: none;

position: absolute;

bottom: 0;

text-align: center;

margin: 0px auto;

left: 0px;

right: 0px;

z-index: 4;

}

.sidebar .PopularPosts .item-thumbnail img {

position: relative;

width: 100%;

height: 120px;

object-fit: cover;

}

.sidebar .PopularPosts .item-title {

font: 15px &#39;Oswald&#39;, sans-serif;

text-transform: uppercase;

text-align: center;

margin: 0px auto;

padding-bottom: 10px;

border-bottom: 1px solid #000;

}

.sidebar .PopularPosts .item-title a {

color: #000;

text-decoration: none;

}

.sidebar .PopularPosts .item-snippet {

padding: 10px 15px;

font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;

text-align: center;

}

</style> 






Multicolor 
<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: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts ul li {

float: left;

margin-bottom: 5px;

max-height: 130px;

min-width: 250px;

overflow: hidden;

}

.sidebar .PopularPosts ul li:first-child {

background: #D9EDF7;

}

.sidebar .PopularPosts ul li:first-child + li{

background: #F2DEDE;

}

.sidebar .PopularPosts ul li:first-child + li + li {

background: #DFF0D8;

}

.sidebar .PopularPosts ul li:first-child + li + li + li {

background: #FFEEBC;

}

.sidebar .PopularPosts ul li:first-child + li + li + li + li{

background: #E0E0E0;

}

.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>
 




Grid 
<style type='text/css'> 

.sidebar .PopularPosts ul {

padding: 0;

}

.sidebar .PopularPosts ul li:first-child{

width: 100%;

max-height: 100%;

opacity: 0.9;

}

.sidebar .PopularPosts ul li:nth-child(even){

margin-right: 2%;

}

.sidebar .PopularPosts ul li {

box-sizing: border-box;

position: relative;

padding: 0px !important;

width: 49%;

max-height: 120px;

opacity: 0.4;

overflow:hidden;

float: left;

margin-bottom: 2%;

-webkit-transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-ms-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

}

.sidebar .PopularPosts ul li:hover {

opacity: 1;

}

.sidebar .PopularPosts .item-thumbnail {

margin: 0;

width: 100%;

}

.sidebar .PopularPosts ul li img {

box-sizing: border-box;

width: 100%;

height: 100%;

object-fit: cover;

padding:0;

}

.sidebar .PopularPosts .item-content:hover .item-title a,

.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {

visibility: visible;

opacity: 1;

}

.sidebar .PopularPosts .item-title a {

color: #fff;

background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);

text-decoration: none;

position: absolute;

text-align: center;

font: 13px &#39;Oswald&#39;, sans-serif;

left: 0;

right: 0;

bottom: 0%;

padding: 100px 10px 10px;

opacity: 0;

visibility: hidden;

}

.sidebar .PopularPosts .item-snippet {

display: none;

}

</style>





Numérico 
<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: 100%;

width: 100%;

object-fit: cover;

}

.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>  




Como adicionar o css



Vá no seu blog, Tema, Editar HTML e aperte Ctrl F e procure por </head> , então ACIMA dele cole o css/estilo que você mais gostou! (img exemplo) . 

Alternativa 2: Caso não funcione, cole abaixo de </b:skin>. 

Alternativa 3: Se seu template for de um site personalizado pode não ir, então terá que retirar do css que escolheu o <style type='text/css'>, </style> e .sidebar , e colar acima de  </b:skin>.

Então o que acharam? Espero que tenham gostado! Estou usando a multicolor, e mudei as cores, você pode modificar a vontade. Créditos: Helpflogger . Por hoje é só! Estou cheia de ideias e querendo aumentar os dias de posts. Até mais 



Leia também:

21 comentários

  1. Nossa adorei essa dica, parece ser tão fácil mexer com HTML, trabalho com designer grafico, mas quero muito aprender a parte de web esse seu post me motivou ainda mais XD.

    Beijos
    http://singularidades.blog.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou! No começo você acha que está em outro planeta mas quando pega algumas noções facilita bastante! Também comigo é design gráfico e web ^.^
      Aprenda, talvez goste e boa sorte! Obrigada pela visita! ~Kissus

      Excluir
  2. Oii linda! Adorei o post! Vou fazer alguns testes no meu blog pra ver se dá certo!

    Te adicionei lá no cbblogers e já estou te seguindo aqui também para não perder nenhuma novidade.

    Será um prazer ter uma visita sua no meu blog: www.femininaemuitovaidosa.com

    Beijos e muito sucesso!

    Ester <3

    ResponderExcluir
    Respostas
    1. Oláa! Fico feliz que gostou! Teste sim, e de preferencia use também haha *-*
      Eu entrei no Cbbloguers faz pouco tempo, fico feliz que me viu lá <3 Muuito obrigada! Vou passar lá! Kissus ;**

      Excluir
  3. Eu ameeei demais essa dica e a forma que explicou. Só estou com uma dificuldade: Qual modelo escolher??? hahahaha Quero todos ahduashduahsuda
    Obrigada mesmo pela dica! Beijos!
    Tamara
    Blog Tamaravilhosamente

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Essa dificuldade é complicada de ajudar kkk , fico feliz que chegou a gostar de todas! Ve oq ue mais combina com seu blog! Nada, obrigada você pela visita *-*, kissus!

      Excluir
  4. Olá, td bom?
    Awnnn ♥♥ Vu testar agora o minimalista (se eu for inteligente acho q dará certo hehehe) hsuahsuhsu
    bjs

    Blog: Skull Minds | Ganhe divulgação gratis!

    ResponderExcluir
    Respostas
    1. Oláa, tudo sim e você?
      Teste, vai combinar muito o minimalista no seu blog! *-* Vai dar tudo certo kk, cole acima de ou abaixo de . Kissus!

      Excluir
  5. June, amei sua dica!
    Vou testar esses modelos e ver qual fica melhor no meu blog!
    Já estou te seguindo para acompanhar as próximas.

    Beijos <3

    http://apartamentoparadois.blogspot.com/

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou!
      Testaa sim! Obrigada por seguir, seja bem vinda! ♥

      Excluir
  6. Amei, eu gosto muito de tentar os tutorias desse lugar, mas as vezes fica uma coisa aqui e ali estranha. Eu gostei da caixa coloridas, vou tentar no meu template de teste
    bjs

    ResponderExcluir
    Respostas
    1. Sério? Qualquer coisinha pode me chamar no google+ , as vezes pode ser o layout que está usando ou algo do tipo, sempre testo tudo. Mas espero que consiga, vai ficar bem legal lá ^^ Obrigada pela visita! Kissus

      Excluir
  7. Adorei as dicas. Queria por o colorido, mas não sei mudar as cores, então optei pelo numérico e ficou bem bacana.

    Vidas em Preto e Branco

    ResponderExcluir
    Respostas
    1. Que bom que gostou! As cores são as #'s no código linda, nesse site (http://html-color-codes.info/) você pode escolher qual quer e ai é só substituir. Mas fico feliz que está utilizando um, visitei lá, ficou bem bacana mesmo! *-* Obrigada pela visita! Kissus

      Excluir
  8. Me apaixonei pelo primeiro, muito lindinho! *-*

    ResponderExcluir
  9. Velho te amo - Kkkk - eu estava procurando isso a um certo tempo para por em meu blog. Assim que eu puder colocar, obrigada!

    beijinhos!
    www.memorizeis.blogspot.com

    ResponderExcluir
    Respostas
    1. eitaa Kkkkk realmente é raro achar de estilos diferentes, por isso achei necessário trazer aqui, fico feliz que te ajudou realmente! De nada! Obrigada você pela visita e comentar :3 Kissus!

      Excluir
  10. Wowwww, que dica mais maravilhosaaaa! Sério, ficou uma gracinha e eu quero muito tentar fazer. Esse fim de semana vou me aventurar nesses HTML pra deixar tudo fofo! Arrasou! Obrigada *-*

    Beijos!
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigadaaaa! Tenta, vai dar mais estilo no seu cantinho, qualquer duvida é só me chamar no google+ . De nada! Obrigada você pela visita <3

      Kissus!

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers