Adicionando biografia do autor abaixo das postagens do blog

Compartilhar:
Olá queridos leitores, hoje veremos como colocar uma pequena biografia do autor no final de cada postagem do seu blog automaticamente. Neste gadget, possui a imagem do autor, o nome do autor e a descrição. Mas é claro que você pode adicionar mais coisas ao gadget e personalizá-lo ao seu gosto. Então, vamos ao tutorial!
1. Acesse a guia Modelo, clique no botão Fazer backup/Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Depois, clique no botão Editar HTML e marque a opção Expandir modelos de widgets.

3. Pressione Ctrl+F para abrir o Localizador do navegador, e procure pelo código abaixo.

]]></b:skin>

4. Imediatamente acima deste código, cole o seguinte código.


.bio-autor{
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px solid #000; /* edite cor da borda */
border-bottom: 1px dotted #000;  ---/* edite cor da borda */
}
.autor-avatar{
float:left;
margin:5px;
}
.autor-text{
color:#494949;   ---/* edite cor da fonte */
font-style:none;
font-size:12px;   ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;
margin-left:5px;
}
.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px;  ---/* Tamanho da fonte do título */
color:#777;     ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}

5. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

6. Ainda na opção Editar HTML e com a caixa expandir modelos de widgets, pressione novamente Ctrl+F para abrir o Localizador e procure elo código abaixo.

<div class='post-footer-line post-footer-line-3'/>
Atenção: o código acima faz referência à parte abaixo das postagens e é uma sugestão de onde colocar o gadget. Caso você queria outro lugar, deverá ter conhecimentos em HTML.
7. Após ter encontrado o código onde deseja colocar o gadget ou o código acima, cole o seguinte código abaixo do mesmo.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME-DO-AUTOR&quot;'>
<div class='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor.<a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>

Substitua as partes destacadas de vermelho pelo nome do autor do blog (no caso, o seu). Substitua a parte destacada de azul pelo endereço da imagem do autor. Substitua a parte destacada de laranja pela descrição do autor e por fim, substitua a parte de rosa por um link com mais informações sobre o autor (caso não queria o link, basta apagar toda a parte destacada de negrito).

8. Por fim, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Tudo pronto! Agora, os seus leitores poderão saber mais um pouco sobre você e facilita muito. Caso queira ver como irá ficar, basta olhar o final desta postagem de testes. Abraços e até mais.

Referências:

► Postagens Relacionadas:

9 Comentários

ssianfilipe disse...

Posso encontrar esse mesmo post nesse link: http://www.mundoblogger.com.br/2010/05/biografia-do-autor-do-post-no-rodape.html
Aproveita e dá uma olhada nesse: http://bloggandonaweb.blogspot.com/2011/07/o-plagio-e-suas-consequencias-uma-praga.html

1 de fevereiro de 2012 08:53
João Almeida disse...

Me desculpe SSianFilipe, esqueci de colocar as referências do MUNDO BLOGGER. Favor, veja o post atualizado.

1 de fevereiro de 2012 18:23
ssianfilipe disse...

hm... ta ok! Aproveite para dar uma conferida em nosso blog: http://www.gritoo.com/

1 de fevereiro de 2012 21:39
João Almeida disse...

Pode deixar que eu visito e obrigado pela participação! Volte sempre.

2 de fevereiro de 2012 00:31
Fabio Ozuna Lima disse...

Foi o unico tutorial que deu certo. Parabéns
www.papolivre.net

28 de maio de 2012 16:57
dritinoco disse...

Depois de muitas tentativas e tutoriais diferentes, essa foi a unica que deu certo. Só uma dúvida, tenho visto por aí bios com o número de artigos escritos por cada autor do blog. Tem como incluir isso nesse mesmo código?

11 de fevereiro de 2013 21:28
João Almeida disse...

Oi. Só é possível fazer a contagem com o Wordpress.

11 de fevereiro de 2013 21:33
dritinoco disse...

Obrigada pela informação :)

11 de fevereiro de 2013 21:47
Fernando Kalask disse...

Único lugar que encontrei em que o código funcionou perfeitamente. Procurei em 10 lugares diferentes e só aqui fui ter resultado. Muito obrigado :D

2 de maio de 2013 02:14

Postar um comentário