Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1484568950
Vida do cache: 1485864946
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Postagens

Descrição do autor no fim das postagens

Fiz um “campo” especial para colocar no fim das postagens, onde aparecerá uma foto e um pequeno texto descritivo do autor que escreveu cada texto do blog. Estilo esse que está no Códigos Blog.

Esse código foi desenvolvido para ser usado em blogs com mais de um autor, de forma que a descrição do autor vai ser mostrada de acordo com quem escreveu a postagem, tudo isso de forma automática sem necessidade de modificar nada dentro das postagens.

– Faça login no Blogger, entre em “Layout” -> “Editar HTML”. Marque a caixa “Expandir modelos de widgets”.

– Procure (Ctrl + f) por:

]]></b:skin>

- Cole o seguinte código ANTES do código encontrado:

#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background: #071a3a; /* Cor de fundo */
margin: 8px 0px 8px 0px; /* Distancia das margens do campo do autor */
font-family: Geneva, Arial, Helvetica, sans-serif; /* Estilo de Fonte */
}
#autor-img { /* Estilo Avatar */
width: 54px; /* Largura do espaço para avatar */
height: 54px; /* Altura do espaço para avatar */
background: #fff; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Distancia das margens do avatar */
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
#autor-sobre a{ /* Estilo texto linkado */
color: #9A9A9A; /* Cor link utilizado dentro do campo */
text-decoration:none; /* Sem algum efeito de destaque no link */
}
#autor-sobre a:hover { /* Estilo texto linkado ao passar mouse */
color: #9A9A9A; /* Cor link ao passar mouse */
text-decoration:underline; /* Sublinhado no texto ao passar mouse */
}

O código CSS acima são as características da caixa do autor. Está toda comentada entre */ ... /*
Para fazer alguma modificação basta saber o básico do básico de CSS, como mudar cores e tamanhos.
Basta mudar atentamente os estilos e personalizar ainda mais o “widget”.

- Procure (Ctrl + f) por:

<div class='post-footer'> ou <div id='post-footer'>

- Cole o seguinte código ANTES do código encontrado:

<b:if cond='data:post.author == &quot;NOME DO ESCRITOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='LINK_DA_IMAGEM' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='autor-sobre'>
<p>
DESCRIÇÃO AUTOR AQUI
</p>
</div>
</div>
</b:if>

O código acima faz referencia a 1 escritor! Para colocar vários escritores, basta copiar e colocar o código várias vezes e fazer as seguintes alterações:

  • NOME DO ESCRITOR -> Coloque exatamente o nome do escritor, igual o nome de usuário usado na conta para postar. O nome deve estar igualzinho ou o código não vai funcionar adequadamente. Exemplo: Na minha conta utilizo o nome: Paulo Estevão. Então devo colocar: Paulo Estevão. Se fosse Admin, deveria colocar Admin, se fosse AdmIniStradoRR deveria colocar AdmIniStradoRR.
  • LINK_DA_IMAGEM -> Coloque o link da imagem do avatar. Lembrando que o link deve ter um caminho direto para a imagem com um tamanho de 50px por 50px. Obs.: Não se esqueça do http://
  • DESCRIÇÃO DO AUTOR AQUI -> Coloque o texto de descrição do autor nesse local. Faça testes de forma que não passe do limite dos campos do widget. Obs.: Use links e o que quiser dentro da descrição.

- Relembrando: Se seu blog tiver mais de um escritor, basta colar o código acima quantas vezes for necessário e editá-los de forma que cada escritor tenha o seu código.

- Teste salve e teste novamente.

Para editar melhor o campo do autor, leia os seguintes textos:



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:

30 Comentários

  1. Lucas Rezende Tedeschi disse:

    Muito bom, parabéns pelo site, é o site com melhor template que já vi, muito bem trabalhado!

  2. Jamis Henrique disse:

    Parabéns pela dica, isso talvez, ajudara muita gente (inclusive eu quando achar outra pessoa para postar)..

  3. Ramiro Marques disse:

    Um tutorial bem útil. Obrigado.

  4. Gustavo disse:

    É o site com melhor template e ajuda muito mesmo, parabéns por todo seu trabalho, chegar a 1200 seguidores requer muito trabalho e tempo.

  5. Tonný disse:

    Funcionou perfeitamnete.. OBRIGADOO

  6. Roberto du Vale disse:

    Kra muito boa essa dica, muito obrigado, a cada dia que passa vou apredendo coisas novas e onde procuro essa coisas??? Aqui mesmo, sempre venho aqui e vejo as novidades, parabens pelo blog…

  7. Marcelo Magoga disse:

    Muito boa essa dica e as outras de seu Blog! Agradeço e funcionou perfeitamente no meu. Parabéns pela iniciativa.

  8. Taillard disse:

    Excelente dica menino!Parabens pelo seu blog vou levar seu banner aos meus blogs.
    Valeu mesmo adiantou um bom pedaço de publicidade dos meus produtos,que tenho em meus blogs.
    Nossa muito grata mesmo!!!
    Valeu,valeu,valeu!!!

  9. Francisco Cunha disse:

    Não conseguir a descrição apareceu legal, mas a foto não apareceu aguem poderia mim ajudar por favor.

    Meu MSN: franciscocunhaphb@hotmail.com
    Meu blog:http://comunidadesfrancisco.blogspot.com/

  10. Francisco Cunha disse:

    Consegui, obrigado!! Parabéns pelas dicas vc é demais

  11. Ronaldo Pereira Borges disse:

    O meu funcionou em parte. Só não esta aparecendo meu nome no Post.

    Parabéns pelo ótimo post!

  12. @BaixandoProPC disse:

    Infelizmente não funcionou aqui, mas tudo bem.

  13. Bruno Sajermann disse:

    Olá, fera me da uma ajudinha, eu tenho o hack leia mais, só que na pagina inicial a biografia ficou pra baixou do hack, ou seja, eu queria que aparece-se só quando o leitor abri-se a postagem, tem como me ajudar?

    Obrigado!

  14. Tokyo disse:

    Bom o codigo funcionou em parte, somente a parte do nome do autor não apareceu.

    mas vlw assim mesmo otimo post!!!

  15. RuH Santos disse:

    como fazer para a descrição só aparecer dentro da postagem?

  16. Kamila Patriota disse:

    post perfect!!! parabéns… muito util e objetivo!

  17. RLY player disse:

    Como faço para por isso só dentro das postagens?

  18. Carolmay disse:

    Desde que li este artigo nos meus feeds fiquei com vontade de implementar no meu blog. Finalmente consegui um tempo para isso e ficou ótimo. Funcionou perfeitamente. Obrigada!!

  19. Rolefe disse:

    Muitíssimo obrigado! Só tive que dar uma modificada no código por que não era exatamente isso que eu queria. Mesmo assim, o post tá ótimo. Se puder, da uma passadinha no meu blog/site:

    http://www.AnimeCodded.com

    Obrigado,
    Rodrigo

  20. Andreia De Lange. disse:

    ola!!! gostaria de dar os parabens pelo site…
    e p dizer que nao estou consseguindo faser essa alteraçao no meu blog, fiz tudo certinho da maneira que voce esplica, conferi varias vezes, mas nao funciona…
    se puder me ajudar!
    obrigada… e parabens!

  21. Gustavo 2 disse:

    Não funciona certinho… mas tenteii.. valeu'
    http://ribeirossauro.blogspot.com

  22. Lucas Lima disse:

    A imagem ficou grande de mais e atrapalhou. Mais obrigado pela dica.

  23. Izaque disse:

    Funciona bem muito bom obrigado, mas queria saber como colocar os icones de nossas redes sociais assim como o seu

  24. Lucas disse:

    Nossa, funcionou perfeitamente no meu site, gostei bastante, site de vocês é ótimo, muito obrigado pela dica!

  25. Para mim não deu certo! Porque? Me ajudem. Obrigado

Para enviar seu comentário, preencha os campos abaixo:

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