Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Postagens

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;

Se quiser você também poderá aplicar um efeito gradiente ao plano de fundo(background).
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 .
Se quiser também pode aplicar Efeito Sombreado nas bordas.

Ocultar todo o rodapé da página inicial

Se você não quiser mostrar as informações dos elementos do rodapé dos posts na sua página inicial, deverá acrescentar a condicional para a página inicial e nela definir o que ficará oculto.

Entre nn menu ‘modelo‘ ? ‘editar html‘,clique em ‘expandir modelo de widget‘, e procure pela tag: ]]></b:skin>

A condicional para a home e o código do elemento que você quer ocultar devem ser colados logo ABAIXO dela:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-footer{display:none;}
</style>
</b:if>

Desta forma você está definindo que o rodapé do post não apareça na Página Inicial, ele irá aparecer nas páginas internas normalmente. Ficarão ocultos apenas na home.

Leia também o artigo que ensina a Aplicar estilos á página inicial do blog, talvez você se interesse em aprender mais sobre como fazer com que a página inicial se apresente de forma diferente das demais páginas.

Caso queira conhecer melhor as condicionais da linha de rodapé, sugiro que dê uma lida no artigo:
Adicionar elementos na linha do Rodapé



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

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.

42 Comentários

  1. Aline disse:

    Gostei, vou tentar usar no meu blog.
    Bjs

  2. Fernando disse:

    Na etapa 3 vc fala para procurar “.comment-link {” e se necessário a gente tem que colocar essa parte….onde devemos colocar ela?

    agradeço desde já…

  3. Excelente tutorial Vanessa _super completo.
    Pra mim deu ótimos resultados só o .coments-link que não deu, mas o restante ficou muito bom.
    Vanessa ,puxa a orelha do pessoal que quer passar por cima dos direitos autorais.
    abraço

  4. Nome * disse:

    muito boa essas dicas

  5. Alex Imada disse:

    os créditos do template pode ficar dentro do html,eu só quero ocultar oque esta na parte de fora,mas eu já descobrir como fazer isso!!! obrigado Vanessa!

  6. Alex Imada disse:

    fala sério…eu perguntei se vc sabia ,pois não quero pagar para adquirir o template,somente ocultar o soratemplate do rodapé e mais nada,Muito obrigado por responder!!!

    • Vanessa disse:

      Acontece que isso que vc quer é exatamente ocultar/retirar os créditos de autoria do desenvolvimento do template. Isto ai são os direitos autorais do soratemplate e eu sugeri que vc solicite ajuda a eles, até pq somente ELES poderão autorizar ou não a retirada dos créditos, concorda?

  7. Alex Imada disse:

    desculpa a demora,meu modelo é do Sora Template,eles poe um link do sora no rodapé ,que fica impossível de ocultar,eu não sei muito de html,me ajuda a ocultar esse link, não quero retirar os créditos dele,apenas ocultar,teria como por favor..Muito Obrigado!

    • Vanessa disse:

      Vc deve entrar em contato com os desenvolvedores do template e solicitar ajuda a eles.

    • Sou programador.. vc nunca vai conseguir retirar os créditos de um template Sora sem pagar por ele.

      Ele usam uma combinação exclusiva de códigos que faz cm que o template apresente defeitos qdo s créditos são removidos.
      Então, se vc ainda que um template Sora sem a menção de direitos autorais, vai ter que pagar por isso.

  8. Para qual modelo esse tutorial se aplica ?

    Qual modelo o seu blog usa ??

    Porque não encontrei essas linhas no meu blog …. Pois eu não recebo comentários porque muitos falam que não sabem comentar, pois não encontram a opção, então queria dar uma enfase na opção.

  9. Alex Correa disse:

    já procurei pela internet toda mais não achei ninguém capaz de me dizer,como faço para ocultar o soratemplate no blogger,nao quero retirar os direitos autorais,mais simplemeste ocultar o soratemplates,tem como fazer isso? me ajuda por favor,nao sei mexer em blogger,mas com sua ajuda eu sei que consigo,vc é uma pessoa muito inteligente,admiro muito seus posts!!! me envia um email me explicando,pode ser?!

  10. thaicaldas disse:

    ô vida, eu tento, tento, tento, mas nao consigo aplicar estilo aos meaos meus marcadores ): quando eu coloco a pagina pra visualizar depois de acrescentar os códigos, ela fica em branco ): o que será que tá dando errado?

  11. Vinícius disse:

    Vanessa tenho uma pergunta. Eu li as primeiras partes. Mas n sei se achei o que queria. Por exemplo eu vou colocar tudo que vc falou no post, mas eu quero colocar também uma descrição, ou seja um breve texto sobre o postador, como faço isso?

  12. procurei com calma,e nâo existe o que voce està falando,procurei com muita calma e nada. nâo hà a palavra sequer de homepage,serà que està com defeito o que eu faço p tirar o rodapè?

  13. Jeise disse:

    Estava tentando ocultar o rodapé dos posts na página inicial e consegui… Funcionou… Muito bom.. Muito obrigada pelo seu talento..

  14. Sayonara disse:

    Ola Vanessa
    Meu blog esta com as postagens muito separada uma das outras. Estou tentando resolver mas nao estou conseguindo. Voce pode me dar uma dica onde faço esta alteração.
    Ficarei agradecida.
    Sayonra

  15. Rejane Gomes disse:

    Eu rodo, rodo, rodo o google mas sempre acabo caindo no seu blog que sempre me salva. Já usei vários tutoriais no meu blog e TODOS deram certos.
    Parabéns!!!!

  16. jackson disse:

    ola!!!baixei um template da net e modifiquei totalmante ele.
    só ki a parte onde tem a “categoria” e o nome do “autor”
    fica entre o titulo e o poste!!!E eu queria colocar no rodapé do poste!!!
    sera ki poderia mi ajudar com esse problema?

  17. Lina disse:

    OI! Então… eu utilizei algumas das dicas postadas em cima, e todas funcionaram muito bem por sinal, mas sabe o que acontece: eu gostaria de modificar a data, colocar uma imagem de calendário ao lado dela. Tem como?

    Obrigada

  18. .:: Clau ::. disse:

    Giovani
    Vc tem que ajustar os valores de "padding" em .post-labels

  19. Giovani Bartz disse:

    Clau, consegui colocar os ícones ao lado dos comentários e dos marcadores. O problema é que preciso baixar os marcadores pois não estão na mesma altura do ícone.
    Acrescentei a parte ".post-labels a{padding:0px 0px 0px 0px; }" mas não está funcionando.
    Como posso fazer isso?
    Abraço.

  20. Natan C. Bezerra disse:

    Achei o que procurava! Estava procurando como na página principal do blog não aparecer o rodapé da postagem. E aqui achei muito obg.

  21. Cremilton disse:

    Parabéns Clau, excelente trabalho, isso irá me ajudar muito, e tenho certeza que a outros também. Voltarei quando tiver mais tempo, para ler com mais calma, um abraço.

  22. Samanta disse:

    Olá querida, estava doida pra ocultar o rodapé da postagem na página inicial e consegui facilmente com seu tutorial !!! Ficou ótimo, bem mais clean o visual da Capa !! Obrigada novamente pela ajuda !!

    Um beijo e boa semana !

  23. João Pedro Pedroso disse:

    Oi,
    tenho um blog coletivo e preciso fazer essas assinaturas personalizadas… com a foto e mini biografia de cada um. Assim como 'sobra a autora', desde seu blog, mas condicionado a cada autor… Por favor, se puder me indique outro artigo ou simplesmente informe que isso é impossível :) ótimo blog, sempre que procuro algum tutorial no google caio no seu blog (e geralmente encontro o que procuro). Abraço,

    PRECISO DA MESMA COISA

  24. Well Souza disse:

    Oi,
    tenho um blog coletivo e preciso fazer essas assinaturas personalizadas… com a foto e mini biografia de cada um. Assim como 'sobra a autora', desde seu blog, mas condicionado a cada autor… Por favor, se puder me indique outro artigo ou simplesmente informe que isso é impossível :) ótimo blog, sempre que procuro algum tutorial no google caio no seu blog (e geralmente encontro o que procuro). Abraço,

  25. .:: Clau ::. disse:

    Novidades Ngt
    Alguns recursos variam de template para template. Sendo assim, não tenho como te ajudar.

  26. Novidades Ngt disse:

    Meu blog são daqueles em que os templates são personalizados… eu queria que ao final de cada post na pagina inicial tivesse a assinatura do autor marcador data e etc… mas não tem veja http://www.novidadesngt.com.br como faço para colocar ?

  27. Nina disse:

    O item Comentário está abaixo do titula da postagem , como coloco no rodapé da postagem? Estou usando um template pré formatado.

  28. CHEZ CAROL BAR LOUNGE disse:

    Muito bom querida!Beijos iluminados!Parabens pelo novo blogger!Agora sim é sue né amiga linda?

  29. Zaraki disse:

    valeu pela força estava precisando mesmo, adorei tambem o tutorial de bordas na pstagem , valeu abraço

  30. ? Jão Bless ? disse:

    Manda Muito heim Clau…
    BrigadoOoo
    bjoOoo…

  31. comandoblogger disse:

    Estava em busca dessas dicas a algum tempo, vai me ajudar muito. Obrigado!

    Att.
    @JamisHenri

  32. Yorgan disse:

    Obrigado Clau. vou então fazer uns testes com esses códigos.

    obrigado, e boa continuação 😉

  33. .:: Clau ::. disse:

    Yorgan
    Me desculpe mas eu não costumo passar meu msn,principalmente para esclarecer dúvidas.
    Este tutorial já está bem explicativo, as maneiras de se aplicar os estilos depende de cada um, basta usar a criatividade. Eu já dei os caminhos a serem seguidos, agora cada um deve personalizar esta parte da maneira que achar melhor.
    Se você está com dúvidas a respeito das tags (condicionais) da área do rodapé, Sugiro que você dê uma lida no artigo:
    "Escolhendo o local para instalar elementos na área dos artigos"
    para conhecer melhor as condicionais da linha de rodapé, talvez te ajude.

  34. Yorgan disse:

    hehe 😀 bem me parecia é que é um pouco confuso de explicar…

    da para ceder o seu msn/e-mail, assim explicava e mostrava um exemplo…é que também não quero fazer publicidade a outros sites…

  35. .:: Clau ::. disse:

    Nossa Yorgan, não entendi nada! O.o

    Lucas
    Eu sempre procuro atender aos pedidos, desde que estejam dentro do meu conhecimento ou das minhas possibilidades. As vezes pode demorar um pouquinho pra sair, mas sai..rs =P
    Abraços querido 😉

    Arierom
    Nossa que bom que sem querer acertei então! =D
    Obrigada pelo comentário 😉

  36. Arierom disse:

    Clau,

    muito bom! Há tempo que desejava ocultar o rodapé dos posts na página inicial.
    Os tutoriais do Mundo Blogger são a sincronicidade de minhas necessidades!

    Parabéns e obrigado; @Herege

  37. Lucas disse:

    Clau! Não è que você atendeu meu pedido? Eu jà tinha enviado muitas mensagens pelo formulàrio de sugestões,para este artigo.
    Muito bom mesmo o artigo,bem detalhado.

    Òtima tarde Clau!

  38. Yorgan disse:

    Muito bom CLau!

    Só fiquei com uma dúvida.

    eu queria adicionar um rodapé nos posta mas no interior do post, do género, na 1ª parte fica normal, mas na parte de dentro do post já fica com outros critérios…faço me entender?

    agradecia a sua ajuda, please 😀

    obrigado, sempre a ajudar com esses tutorias 😉

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

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