Como personalizar o Rodapé dos Posts no Blogger

Por padrão no Blogger, ao final dos posts, vem o rodapé, que está representado pela tag: post-footer.
Neste trecho que fica localizada as informações de:assinatura do autor do post, hora da postagem, link de comentários e marcadores.

Neste tutorial veremos como aplicar estilos a cada trecho localizado no rodapé do post.
Veremos como acrescentar imagens ícones ao lado de cada elemento:assinatura do autor, hora, link para os comentários e marcadores.
Veremos também como aplicar bordas e cores ao rodapé do post.

Por padrão, tanto nos templates mínima, quanto nos designer de modelo, não há código incluído para definição de estilos da assinatura do autor do post e nem para a hora da postagem.
Você deverá acrescentar o trecho de código para cada elemento e neles aplicar os estilos de acordo com a sua preferência.

1. Aplicar estilos para assinatura do autor:

Entre no menu “modelo” >> “editar html“, procure pela parte referente aos códigos (geralmente está dentro de /* Posts )
e acrescente o seguinte código:

.post-author {
color:#XXXXXX;   /* cor da fonte */
font-size: XXpx;  /* tamanho da fonte */
font-weight: normal;
}

Neste trecho que você deverá incluir todos os estilos que você quer que sejam aplicados á assinatura do autor do post.

Incluir ícone ao lado da assinatura do autor do post:

No trecho que você acabou de incluir, acrescente:

background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;    /*ajuste as margens se precisar*/
}

Dica: Neste site você pode encontrar mini ícones para autor: iconfinder/user

2. Incluir ícone ao lado da hora da postagem:

Acrescente o seguinte código:

.post-timestamp {
background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/
}

Dica: Neste site você pode encontrar mini ícones para hora: iconfinder/time

Personalizar a cor do link:

A hora da postagem é em forma de link, e por padrão a cor deste link será a mesma cor que você definiu para os todos os links do seu blog.
Caso você queira alterar a cor do link da hora da postagem, mas não quer alterar a cor dos demais links, você pode definir estilos apenas para a cor de link da hora da postagem, basta acrescentar o seguinte trecho:

.post-timestamp a{
color:#XXXXXX;   /* cor da fonte */
font-size: XXpx;  /* tamanho da fonte */
}

3. Aplicar estilos para o link de comentários:

São os “links para comentário” e os “Links para esta postagem” que por padrão, aparecem no rodapé do post.
Está representado por este trecho:

.comment-link {

Em alguns templates não tem esse trecho de código.
Se este for o seu caso, você deverá incluí-lo e nele aplicar os estilos que você preferir.

Incluir ícone ao lado do link de comentários:

Acrescente o seguinte código:

.comment-link {
background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/
}

Dica: Você pode encontrar mini ícones para link de comentários neste site:
iconfinder/comment

Personalizar a cor do link:

Assim como já expliquei acima a respeito da cor do link da hora da postagem,por padrão a cor do link para os comentários será a mesma cor que você definiu para os todos os links do seu blog.
Mas você também pode alterar a cor, basta acrescentar:

.comment-link a{
color:#XXXXXX;   /* cor da fonte */
font-size: XXpx;  /* tamanho da fonte */
}

4. Aplicar estilos para o marcador:

Se quiser definir cor, tamanho da fonte ou incluir um ícone ao lado do elemento “marcadores”, acrescente o seguinte código:

.post-labels{
background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/
color:#XXXXXX;   /* cor da fonte */
font-size: XXpx;  /* tamanho da fonte */
}

Dica: Neste site você pode encontrar mini ícones para marcadores: iconfinder/label

Personalizar a cor do link do marcador:

Sobre a cor do link do marcador, aplica-se a mesma regra já explicada acima sobre o link da hora do post e o de comentários.
Se quiser alterar somente a cor do link dos marcadores, basta acrescentar:

.post-labels a{
color:#XXXXXX;   /* cor da fonte */
}

5. Aplicar estilos para todo o rodapé (post-footer)

O código do rodapé está localizado no CSS do seu blog e representado pelo seguinte trecho:
.post-footer {

Você pode colocar bordas ou uma cor de fundo, para que seja aplicada a toda a área do rodapé, para isso é só acrescentar as linhas “border” e “background” e aplicar os estilos a elas, de acordo com sua preferência.
Acrescente:

background: #XXXXXX;  /* edite cor da fundo */
border:1px solid #XXXXXX;  /* edite cor e tipo de borda */
padding:10px;  /*ajuste as margens se precisar*/

Se quiser acrescentar uma imagem como plano de fundo no rodapé, acrescente:
background: #XXXXXX url(URL-DA-SUA-IMAGEM) repeat;