Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Iniciantes Postagens Vanessa S.

Personalizando a área do Post – (Parte2)

(Este é um post da categoria Iniciantes)

No outro artigo sobre Personalizar Área do Post (Parte 1), você já aprendeu como personalizar DATA, POST, CORPO DO POST, PARAGRAFO DO POST E O TITULO DO POST no espaço ocupado pela postagem.

Agora você vai entender sobre outros elementos que compõem a área do post: IMAGEM DO POST (post img), RODAPÉ (post-footer), LINK DOS COMENTÁRIOS (comment-link) E CITAÇÃO DE TEXTOS (.post-blockquote).

Na maioria dos templates, no corpo do HTML, estes elementos estão representados por estas tags abaixo: (Trechos destacados em vermelho)
Para visualizá-lo vá no menu “modelo>>editar HTML” :

.post-footer {
}
.comment-link {
}
.post img {
}
.post blockquote {
}
.post blockquote p {
 }

Imagem do Post (.post img):

Você pode dar efeitos bem interessantes as imagens postadas no corpo de suas postagens, podendo acrescentar fundo (background) e bordas.
Sempre que você quiser modificar algo referente as imagens do post, você deverá fazê-lo no trecho do código abaixo, localizado no corpo HTML do seu blog.
Se no seu template não tiver este trecho, você poderá acrescentá-lo e incluir estilos a sua maneira.
Veja exemplos:

.post img {
background: #ffffff;
padding:4px;
border:2px dashed #000000;
}

Lembrando que “padding” é o espaço entre a borda e a imagem. Você deve estipular os valores de acordo com a sua preferência.
Para dar o efeito desta imagem abaixo eu usei como exemplo o código postado acima:

Você também pode adicionar uma borda com duas cores diferentes, é só usar a imaginação.

Leia alguns artigos que tratam sobre personalização das imagens do post, talvez você se interesse em conhecer e aplicar outros efeitos ás imagens de suas postagens:
Aplicar efeito de transparência nas imagens do post
Aplicar efeito Hover em bordas nas imagens do post

Rodapé do Post (.post-footer) :

Este elemento está localizado neste trecho, no html do seu blog:
.post-footer {

Você pode colocar um efeito de moldura no rodapé do seu post, para isso é só acrescentar as linhas “border” e “background” e aplicar os estilos a elas, de acordo com sua preferência.

Veja exemplos:


.post-footer{
background: #ffffff;
border:1px solid #ddd;
}

Para acrescentar uma imagem como plano de fundo no rodapé, acrescente:
background: #ffffff url(URL DA IMAGEM);

Sobre imagem como plano de fundo você pode acrescentar imagem de fundo no rodapé do seu post. Para entender mais sobre imagem como “background”, leia sobre como Personalizar plano de fundo (background) veja as maneiras que você pode estipular o comportamento da imagem que você quer aplicar á área do rodapé de suas postagens.
Sobre bordas e seus estilos, veja como Personalizar bordas e como criar Bordas arredondadas .
Leia também este artigo que ajuda a configurar as partes que cercam seus artigos, talvez você se interesse em conhecer um pouco mais sobre a área do Rodapé dos seus posts. Veja o item:
Adicionar elementos na linha do Rodapé
Personalizar o Rodapé dos Posts

 

Link dos comentários:

São os “links para comentário” e os “Links para esta postagem” que por padrão, aparecem no rodapé do post na página inicial.
Está representado por este trecho:
.comment-link {

Se quiser modificar tamanho da fonte ou a cor da fonte, é neste trecho que você deverá acrescentar estilos.
Cores da fonte – acrescente a linha com o código referente a cor que você deseja:
color: #xxxxxx;
Tamanho da fonte – acrescente a linha com o código referente ao tamanho da fonte que vc deseja:
font-size:12px;

Leia também o artigo que explica como corrigir o erro na contagem do link de comentários, talvez você se interesse. Veja o item:
Corrigindo o erro de contagem no link de comentário

Post Blockquote (.post blockquote) :

Este trecho serve para diferenciar as citações que você queira fazer em seu post.
A maioria dos templates padrões do Blooger já vem com esta função ativada, porém não possuem marcação CSS e nem estilos configurados, isso você terá que fazer manualmente.
Se você quiser ativar a função Blockquote para diferenciar partes de textos em suas postagens, deverá aplicar os estilos dentro do CSS do seu template.
Veja o artigo: Personalizar Blockquote no Blogger

[alerta]ATENÇÃO:
Os códigos da área de postagens publicados neste tutorial, foram retirados do Template Minima.
Nos templates minima todo este trecho se apresenta desta maneira. Dependendo do modelo de template, alguns trechos publicados acima, não estão presentes no designer de modelo. Se o seu template já sofreu muitas modificações na área de post, provavelmente esta parte deve se apresentar de outra maneira.[/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

8 Comentários

  1. Olá, mudei o Layout do meu blog e agora não sai do que está, já não sei o que fazer odiei como ficou o que faço?

    • Vanessa disse:

      Lamento mas não tenho como te ajudar. Justamente para evitar esse tipo de problema que eu sempre recomendo que se faça um backup do template antes de realizar qualquer modificação.

  2. Daniel Death disse:

    Nossa,toda a equipe do Mundo Blogger está de parabéns!!!Seus tutoriais são ótimos mesmo,muito bons…Continuem assim,pois coisas que nunca tinha visto eu vi aqui!Se quiserem eu divulgo os blog de vcs no meu blog OK"

  3. Natália disse:

    Clau… Você sabe como colocar barra de rolagem em apenas uma postagem?

  4. Guilherme Lima disse:

    Ajudou bastante, vlw mesmo!

  5. Vanity Fair disse:

    Obrigada Clau, é isso mesmo, vc é showw!!!!

  6. .:: Clau ::. disse:

    Mortes e massacres
    Se for a imagem do post resumido da página inicial, se vc estiver usando o Hack "leia mais", vc terá q alterar as medidas da imagem diretamente no script.
    Dá uma lida no tutorial publicado:
    Hack "Leia Mais" Resumo de Postagem Automático com imagens na Página Inicial.

  7. Mortes e Massacres disse:

    Bom dia!
    Clau amo seus tutoriais e seus templates eu sou dona do blog, http://www.mortesemassacres.com, estou utilizando um dos seus templates, porém eu queria aumentar a área da foto que fica logo no inicio da apresentação dos posts, eu pensava q nesse tutorial tinha essa informação, vc sabe como eu poderia aumentar?
    Bjos sou sua fã!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.