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>
]]></b:skin>
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>
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
Centralizada
div.blog-content {text-align:center;}
div.item-content div.item-thumbnail {display:block; text-align:center; float:inherit;}
]]></b:skin>
div.item-content div.item-thumbnail {display:block; text-align:center; float:inherit;}
]]></b:skin>
À esquerda
div.blog-content {text-align:left;}
]]></b:skin>
]]></b:skin>
À 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>
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
À direita
div.blog-content {text-align:right;}
]]></b:skin>
]]></b:skin>
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>
div.item-content div.item-thumbnail {text-align:right;float:right;margin:5px;}
]]></b:skin>
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!
Oi,
ResponderExcluirDesculpe 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!
@Cris, de nada. :)
ResponderExcluirLegal esta dica, Helen. Usei e ficou tudo arrumadinho. Obrigada!
ResponderExcluirVera
@Vera, de nada. Volte sempre!
ResponderExcluirNossa, muito obrigada pela dica, era exatamente o q eu precisava!!! Parabéns pelo blog!!! Bjos.
ResponderExcluirHelen, 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.
ResponderExcluirEdson, já tentou o post Como centralizar os anúncios do AdSense?
ResponderExcluirElen, boa tarde, tudo bem?
ResponderExcluirAgradecemos 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
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!
ResponderExcluirHelen, obrigada de qualquer forma.
ExcluirContinuarei 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.