Colocar Descrição do autor no fim das postagens com Foto

Como colocar descrição do autor no fim(rodapé) das postagens com foto, é a melhor forma para informar ao seu leitor quem você é e qual o seu interesse com o Blog, neste post você poderá colocar descrição automática para vários autores e colunistas no Blog, e aprenderá colocar descrição de autor manualmente se desejar não mexer com código. E se desejar poderá colocar rede sociais nas descrição do autor do Blog.

Descrição automática para um ou vários autores

Primeiramente vamos colocar descrição para vários autores do Blog, essa descrição irá aparecer para cada autor que publicar no Blog, um exemplo disso sou eu, que publico no portal evangélico: Portal  Umadjt, e sempre aparece automaticamente a minha descrição. 

Veja a imagem:

Se você quer que isso apareça no seu Blog para todos os que publicam em seu Blog, veja os passos abaixo:

Esse código funcionará perfeitamente no Blogger, se você usa outra plataforma não garanto o funcionamento.

Vá no painel do Blogger, Modelo > Editar Html > Expandir modelo e procura por ]]></b:skin>  pressionando CTRL+F, e cole ACIMA dele esse código abaixo.

#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 */ }

Se você percebeu onde tem */ ... /* estar explicando o que o trecho ao lado esquerdo se refere,então se você quiser fazer alguma mudança CSS, pode fazer mais tome muito cuidado com exagero, por que tenho certeza que seu template tem limites então cuidado.

Procure por:

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

E cole ANTES do código procurado e esse código abaixo:

<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>

Esses passos acima foram para somente um escritor, mas se você deseja colocar vários é só colocar um abaixo do outro, cuidado com algum trecho.

• 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: Phablo Projetos. Então devo colocar: Phablo Projetos. Se fosse Admin, deveria colocar Admin, se fosse AdmIniStradoRRdeveria 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 de suas redes sociais ou o que quiser colocar dentro da descrição.

Se você não sabe fazer alguma modificação CSS, veja estes posts:

Css modificando Corpo, fonte, cores das suas postagensIniciantes entenda o CSS (post simples)

Como colocar descrição do autor no fim(rodapé) das postagens com foto

Neste tipo você terá uma descrição mais elaborada e mais arrumada, falo isso por causa que eu próprio uso e se você perceber no final desta postagem você encontrará minha descrição, esta descrição além de ser automática, você não precisará mudar todos os seus posts, por causa que ela irá aparecer em todos(antigos e recentes).

Procure por <div class=’post-footer’> e cole ACIMA o código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p style="border-bottom: 1px dotted #3A6DA1;"></p> <font style="font-size:18px"><b>Sobre o Autor:</b></font> <table border="0"> <tr> <td><img src="URL_da_IMAGEM" alt="SEU_NOME" border="0" style="border-bottom: 0px; border-left: 0px; margin-left: 0px; border-top: 0px; margin-right: 5px; border-right: 0px" /></td> <td>Texto que deseja usar para descrever-se. Recomendo que não tenha mais que 45 palavras e coloque ao menos um link para a página completa da Biografia.</td> </tr> </table> <p style="border-bottom: 1px dotted #3A6DA1;"></p> </b:if>

• De verde onde está “Sobre o Autor:” você pode escrever um pequeno título para a mini-biografia ou escrever seu Nome.

• Onde está vermelha, “URL_da_IMAGEM”, coloque o endereço de uma foto sua, que tenha um tamanho adequado. Recomendo que não seja maior que 75px de altura.

• No vermelho, “SEU_NOME, coloque o seu nome de autor, que será exibido quando o mouse estiver sobre a foto.

• Por fim, o que está em negrito preto, escreva um pequeno resumo de sua biografia ou apresentação, como achar mais adequado.

Pronto, visualize e salve.

Colocar descrição de autor manualmente

Este tipo de descrição é meio chata e não é para todo tipo de blogueiro, deixa eu explicar, acredito que terá algumas postagens suas que você queira colocar essa descrição manualmente por causa que seu Blog não estar funcionando bem alguns códigos e seu blog tem vários autores ou são posts com créditos de outros autores, logo você usará este tipo de descrição para toda as suas postagens.

OBS: Você terá que colocar essa descrição no fim das postagens toda vez que escrever.

Explicando esta descrição:

Depois de digitar seu post e estiver tudo pronto para ser publicado, clique na aba do editor de posts que permite a edição no HTML do texto. Vá no final de todo o código e cole o código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p style="border-bottom: 1px dotted #3A6DA1;"></p> <font style="font-size:18px"><b>Sobre o Autor:</b></font> <table border="0"> <tr> <td><img src="URL_da_IMAGEM" alt="SEU_NOME" border="0" style="border-bottom: 0px; border-left: 0px; margin-left: 0px; border-top: 0px; margin-right: 5px; border-right: 0px" /></td> <td>Texto que deseja usar para descrever-se. Recomendo que não tenha mais que 45 palavras e coloque ao menos um link para a página completa da Biografia.</td> </tr> </table> <p style="border-bottom: 1px dotted #3A6DA1;"></p> </b:if>

E faça tudo o que demostrei anteriormente. Pena que você terá que fazer isso toda vez que escrever.

Veja também: 

Adicionar autores no blog
Adm: Gostou? Então compartilha e comenta! Não se esqueça de nos seguir e curti.

Gostou? Compartilhe:

Tweet