Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

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

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:

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

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 50pxObs.: 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
Colocar Descrição do autor no fim 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:
Ruan Phablo

Ruan Phablo é blogueiro desde 2009, mas só a partir de 2012 começou a levar a blogosfera a sério. Foi aí que ele criou o Phablo Projetos, um blog que tem por objetivo ajudar outros blogueiros. Você pode encontrá-lo no Facebook, no Twitter e no Google+.

8 comentários:

  1. Olá Boa tarde:
    Apesar do post estar bem explicito em qual das div class=’post-footer’ devemos colocar o código,porque no meu caso aparece duas e penso que a 2ª,que fica um pouco mais para baixo da fonte, deve pertencer ao blogger.
    Obrigado
    Abraço

    ResponderExcluir
  2. Asantix escolha o primeiro ...class=’post-footer’....

    Quando coloquei em meu Blog fiz com o primeiro trecho que aparece na procura e funcionou, não se preocupe se não funcionar escolha o segundo.

    Abraços.

    ResponderExcluir
  3. Muito útil este tutorial... Inclusive para colocar outros tipos de funcionalidades... Pensei que isso só fosse possível no WordPress, mas que bom que funciona no blogger também. Parabéns!

    ResponderExcluir
  4. Fernando,

    Eu já tinha vontade de colocar minha descrição abaixo de cada postagem, quando coloquei percebi que daria um ótimo post para o Blog, e foi o que aconteceu.

    E além do mais, esse tipo de ferramenta trás mas profissionalismo no Blog, deixando padronizado para cada leitor.

    Abraços.

    ResponderExcluir
  5. No caso de existirem dois postadores acima do blog, como fazer? Deve-se usar o último método, o manual?

    ResponderExcluir
  6. Pedro Couto,

    Da forma como você trabalha no seu Blog seria melhor a forma automática, pois além de não precisar de mudanças constantes você estará deixando sua marca para seus leitores.

    Abraços

    ResponderExcluir
  7. Respostas
    1. Blog Cultura,

      Qual foi das três opções de descrição que você escolheu?

      Abraços

      Excluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube