Dividir postagens no blog

http://www.superdicaspfs.com.br/2010/06/dividir-postagens-no-blog-imagens-ou.html

Dividir postagens no blog – Imagens ou bordas entre os posts

Publicado em 25/06/2010 » Categoria: Blogger » Tags: area_de_postagens, customizar_layout

Hoje vou ensinar mais uma forma de dar um toque super especial no seu blog e nos seus posts: inserir divisórias entre as postagens. Divisórias entre posts, além de deixar o visual mais bonito, ajudam a dar uma organizada no blog, principalmente se na home os posts forem muito extensos e o título das postagens não tiver um certo destaque. Infelizmente alguns leitores ficam perdidos em meio a muitos palavras e acabam se confundindo com o término de um post e o inicio de outro. A forma que irei ensinar é automática, portanto todos os seus posts (dos mais antigos aos recentes) terão uma borda divisória. Como vamos ter que mexer com o código do template, não esqueça de fazer backup!
Bom chega de conversa e mãos a obra!

Primeiramente faça login em sua conta Blogger;
Vá até Design >> Editar Html. Clique em Expandir modelos de widgets;
Pressione as teclas CTRL+F para abrir a busca do seu navegador, e procure pela tag

.post{
caso você use templates Artisteer procure por .art-post{
feito isso, insira antes do colchete o código a seguir:

background:url(URL-DA-IMAGEM) center bottom no-repeat;
padding-bottom: 30px;

Alterações:

• A parte em vermelho, você deverá trocar pela url da imagem de divisória que você vai usar.
• A parte rosa é referente ao distanciamento que a barrinha divisória ficará perante aos outros elementos (fim do texto e marcadores). Você deverá alterar conforme a disposição dos elementos em seu template. Dica: vá testando valores de padding-bottom. Digite um valor e visualize, quando encontrar um que fique perfeito salve.

Depois de fazer as alterações necessárias seu código deverá ficar semelhante ao da imagem abaixo:

Se deu tudo certo e a divisória apareceu em todos os posts corretamente salve.
Nota: a divisória aparecerá na página inicial e também na página de postagens, fazendo uma divisa entre o fim do post e a área de comentários.

Inserindo uma borda em vez de uma imagem

Para inserir uma borda em vez de uma imagem o processo é bem semelhante. Você irá procurar a tag que mencionei anteriormente e irá inserir este código antes do colchete:

border-bottom: dotted 4px #000;
padding-bottom: 30px;

Alterações:

• A parte em cinza corresponde ao estilo da borda (veja a tabela de bordas ao lado);
• A parte verde corresponde a largura em pixels da borda;
• A parte laranja corresponde a cor da borda;
• E por fim o padding-bottom tem a mesma função que já citei acima.

Essas são as únicas partes que você pode e deve alterar.
No final seu código deve ficar como o da imagem abaixo:

Correndo tudo bem, visualize e salve. E seus posts já estarão divididos com bordas ou imagens.

Atualização 22/07/2010:

Alguns templates não possuem a tag .post{
se este for o caso você deverá adiciona-la manualmente juntamente com o código da divisória. Tudo isso deverá ficar antes da tag ]]></b:skin>
O código final deverá ficar como mostra a imagem abaixo:

Visualize se as bordas aparecerem salve!

Veja também:

• Barrinhas – Divisórias de posts;
• Tabela de cores Html

Tutorial escrito e elaborado por Andressa Quadro – Super Dicas PFS.
Copyright © 2010 – TODOS OS DIREITOS RESERVADOS

Artigo escrito e elaborado por Andressa Quadro
É terminantemente proibida a cópia total ou parcial do conteúdo disponibilizado.