quinta-feira, 10 de setembro de 2009

Como alinhar a lista de blogs

Blogger

A lista de blogs receberá o alinhamento da coluna em que está inserido. Você pode mudar o alinhamento de toda a coluna, mas isso vai afetar os outros elementos dela e pode trazer um resultado indesejado.

Seguem algumas opções de personalização do CSS para mudar o alinhamento dos ítens das listas de blogs no Blogger.

Justificada

Quando a lista de blogs tem snippets (trechos iniciais) dos posts mais recentes, justificar o texto quase sempre é o alinhamento preferido. Para isso basta ir até Layout » Editar HTML e inserir na folha de estilos do Blogger (acima da tag ]]></b:skin>) o seguinte código:

div.blog-content {text-align:justify;}
]]></b:skin>
Justificado

Justificada com imagem à direita

div.blog-content {text-align:justify;}
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
Justificada_2

Centralizada

div.blog-content {text-align:center;}
div.item-content div.item-thumbnail {display:block; text-align:center; float:inherit;}
]]></b:skin>
Centralizado

À esquerda

div.blog-content {text-align:left;}
]]></b:skin>
Esquerda

À esquerda com imagem à direita

div.blog-content {text-align:left;}
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
Imagem direita

À direita

div.blog-content {text-align:right;}
]]></b:skin>
Direita

Texto e imagem à direita

div.blog-content {text-align:right;}
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
Direita 2

Para outras personalizações

  • div#blog-list-title h2.title - título da lista de blogs
  • div.blog-list-container - todo o conteúdo da lista de blogs
  • div.blog-icon - ícone de cada blog da lista
  • div.blog-content - todo o conteúdo de cada blog da lista
  • div.blog-title a - o título do blog
  • div.item-content - o conteúdo de cada post
  • div.item-thumbnail - a miniatura de cada post
  • span.item-title - o título de cada post
  • span.item-snippet - o resumo de cada post
  • div.item-time - a data de cada post

Até mais!

10 comentários:

  1. Oi,

    Desculpe a demora, mas só hoje recebi, digo, vi meu brinde (http://www.htmhelen.com/2009/07/sorteio-triplo-de-colonias.html) Estava viajando e cheguei em casa hoje e vi minha caixinha. Nela continha uma fragrância muito conhecida por mim. Já uso aguas de Natura a algum tempo. E esta fragrância em especifico uso a noite depois do banho para dormir. Tem uma fragância muito suave e calmante.

    Obrigada pelo brinde.
    bjão!

    ResponderExcluir
  2. Legal esta dica, Helen. Usei e ficou tudo arrumadinho. Obrigada!
    Vera

    ResponderExcluir
  3. Nossa, muito obrigada pela dica, era exatamente o q eu precisava!!! Parabéns pelo blog!!! Bjos.

    ResponderExcluir
  4. Helen, gostaria se possivel vc me ajudar para alinhar o adsese, ao centro, pois ele fica sempre ao lado esquerdo da postagem, por favor me ajude, sem mais Edson obrigado.

    ResponderExcluir
  5. Elen, boa tarde, tudo bem?
    Agradecemos pelo seu post, muito bem explicado.

    Gostaria de saber se você pode me dar uma dica de como alinhar a minha "Sidebar" e meu campo de postagens, de forma que fiquem corretos com o meu novo template, que fiz recentemente. Não sei onde certinho, no código html, tenho que mexer.

    Poderia me ajudar? Meu blog:

    www.artesbygabi.blogspot.com

    Abraço!

    Gabriele

    ResponderExcluir
  6. Gabriele, existem alguns trilhões de soluções possíveis para esse tipo de problema porque depende de qual parte do código causa o problema. Você precisa de um especialista em código Blogger que acesse seu código e descubra a solução. Boa sorte!

    ResponderExcluir
    Respostas
    1. Helen, obrigada de qualquer forma.
      Continuarei pesquisando e em busca do que posso fazer. Queria ao menos "uma luz" de onde, no código, seria o "post" e onde seria a "sidebar", pois assim ficaria mais fácil fazer testes.
      Abração e tudo de bom!
      Gabi.

      Excluir

Posts relacionados