Busca

Carregando...

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!

Posts relacionados