Estilos para o gadget Postagens Populares

Estilos para o gadget Postagens Populares

6 10 99
Estilos para o gadget Postagens Populares 10 6 99
Resolvi brincar um pouco mais com o CSS e acabei decobrindo outros estilos que podem ser aplicados ao gadget Postagens Populares, criando assim uma continuação do  post Personalizando o gadget Postagens Populares.
ktipPelo que pude notar, as miniaturas de imagens só funcionam em posts que começam com uma imagem. Se a imagem estiver no meio do post, por exemplo, sua miniatura não vai aparecer no gadget. Como eu quase não usava imagens no topo dos meus posts, precisei pegar o blog do meu irmão “emprestado”, para realizar os testes.
Sabendo que a maioria  não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.
popular-posts
#PopularPosts1 .widget-content{  /*estilo para o conteúdo*/ padding: 3px;
}
#PopularPosts1 a {  /*cor do título*/ color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/ color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/ color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/ border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/ color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo da fonte do título*/
font-weight: bold;
font-size: 15px;
}
Estilo 2– conteúdo com fundo transparente e com borda
Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.
image
#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}
Estilo 3 – conteúdo com fundo preto e borda cinza
No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.
posts
#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
background: #333;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #fff; font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}
Para adequar ao template de vocês, mudem as cores em color e background. Talvez seja necessário mexer nas margens (margin) e preenchimentos (padding).
Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:
#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}
Para manter o ícone e acertar o espaçamento com o texto, acrescente:
#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
Mais completo que isto, impossível, né? Usem a criatividade e boa diversão o/
19 Comments
Comments
  1. Juliana,

    Fez tudo isso do almoço até agora? Impressionante!
    Ficou muito bom. Até me deu vontade mudar o que tenho.

    Excelente post! \0/

    Abraços

    ResponderExcluir
  2. Olá Ju,

    Que legal que você resolveu 'brincar um pouco mais com o CSS" .. rsrs

    Adorei essa sequência complementando ricamente o post anterior sobre este gadget, Ju!!!

    Puxa, agora vou 'brincar' tb, em meu template ;)

    E uma coisa que observei quanto as imagens em miniatura:
    - fiz um teste e notei, no meu caso, que as imagens que adicionei aos posts e deixo o link de origem (publicados pelo editor do blogger), aparecem no gadget normal.
    Porém, como há um bom tempo uso o Live Writter, e por lá, eu opto por 'nenhum' ao add as imagens nos posts, então elas não aparecem no gadget de posts pupolares.

    Mas tudo bem, vc deixou material aqui de sobra para podermos personalizá-lo ;)

    Valeu Ju!
    Obrigada por mais este post completíssimo!

    Beijos no ♥

    ResponderExcluir
  3. uau! ficou demais, as dicas são muito boas!

    ResponderExcluir
  4. Muito legal essa dica de customização do gadget, parabéns por mais este tutorial.

    ResponderExcluir
  5. juliana socorro,o seguidores do meu blog não tá pegando dá pra dar uma olhada lá, eu olhei um pouco no forúm do google e achei mais pessoas com esses problema olha lá pra você ver :
    http://tecnologia-crazy.blogspot.com

    ResponderExcluir
  6. Ótima dica, Juliana.
    Seu blog sempre útil, como sempre.

    ResponderExcluir
  7. Juliana,
    Saudações de Belo Horizonte!!

    Este Post é para relatar um problema com o widget de ESTATÍSTICAS do Blogger.

    Todo santo dia, apesar de eu selecionar a opção "TODO O PERÍODO", de repente, do nada, horas depois ou no dia seguinte, o Blogger apresenta não "todo o período", mas um número de um só dígito.

    Às vezes é 7, noutras 5...
    ... Fico pensando se esses números se referem à contagem da última hora ou do último dia.

    CONTUDO, como pode ser isso, SE o WIDGET nem mesmo dá a opção "Últimas 24 horas", apenas:
    -Todo o período;
    -Últimos 30 dias e
    -Última semana??

    POR QUE O CONTADOR DO BLOGGER ESTÁ "LOUCO"?

    Um Beijão e Muito Obrigada!

    Ah: no Post de 4 meses de aniversário do meu Blog, mencionei a importância do seu trabalho. Se puder, confira neste Link:

    http://www.acatolica.com/2010/11/internautas-vamos-de-maos-dadas-4-meses.html

    Saúde e Paz!!
    A você e a Todos os internautas do Dicas Blogger!!

    ResponderExcluir
  8. Ana, este tipo de problema deve ser reportado diretamente no fórum oficial do Blogger.

    Muito obrigada por ter citado meu blog ;)

    ResponderExcluir
  9. Juliana,
    Saudações de BH (de novo)!!

    Fiz conforme me recomendou. (Foi a minha estreia no Fórum do Blogger!...) Minha pergunta ficou assim:

    "Por que eu seleciono Todo o Período no Widget de Estatísticas e, no dia seguinte, aparece um número de um único dígito?"

    Um Abraço!
    Que Deus siga abençoando o Seu Trabalho, digno de Admiração, Reconhecimento e... Muita Alegria!!

    "Não tem preço" (como na propaganda) a sua ajuda a todos nós.

    Saúde e Paz!!
    A você e a Todos os Seus Fãs!!

    ~~~

    ResponderExcluir
  10. Coo faço para justificar o texto e centralizar o título das miniaturas.

    ResponderExcluir
  11. Juliana, esqueça o que eu te perguntei antes. O que eu quero saber agora é como inserir um parágrafo nos resumos dos posts desse gadget, pois a primeira linha fica colada a borada da imagem.

    ResponderExcluir
  12. Marlon, como você pode ver nas imagens, isso não aconteceu no blog onde fiz o teste. Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.

    ResponderExcluir
  13. Olha eu aqui denovo... rs.
    Estou fazendo umas alterações na minha homepage agora, e a sua dica me ajudou muito.

    O interessante é que, como estou usando dois gadget's 'Postagens Populares', notei que o nome do segundo gadget é 'PopularPosts2'.
    Achei que seria útil dar este toque.

    Abraços e tudo de bom.

    ResponderExcluir
  14. Sempre tive vontade de comentar e comento agora, porque vc arrasa sempre, tudo que preciso para o meu blog encontro por aqui! Parabéns por mais essa boa dia!

    Liz
    branquelasardenta.blogspot.com

    ResponderExcluir
  15. Juliana, posso estar fazendo uma pergunta besta! rsrs mais no meu template não tem nenhuma imagem que antecede o texto, como eu coloco esse marcador?

    ResponderExcluir
  16. Olá sou viciado em blog e html e css queria passar uma dica que pode levar uam atualização do artigo que seria essa

    #PopularPosts1 img{ /*borda e espaçamento da miniatura*/
    height: 100px;
    width: 65px;
    border: 0px dotted #ccc;
    padding: 0px;
    margin: 2px 3px -7px;
    }

    colocando height e width as pessoas podem alterar o tamanho da miniatura quanto vi seu codigo imaginei de cara ficou 10 eu uso a sim no meu blog.

    Vlw

    ResponderExcluir
  17. O Dicas Blogger é simplesmente o THE BEST.

    ResponderExcluir
  18. I will use this on my blog. thank you for the nice article.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top