Blogger: Biografia do autor no rodapé da postagem


   Olá caros blogueiros e blogueiras, hoje estamos com mais um hack para o Blogger, desta vez iremos aprender a como colocar um pequeno resumo da biografia do redator da postagem. Um hack muito fácil para se aplicar.

Conselho

Antes de colocar o hack, aconselhamos a você fazer um backup do seu template e/ou tentar em um blog de testes

Adicionando Bio no rodapé do post


1º Passo: Adicionando estilo a biografia
Volte ao Modelo, clique em Editar HTML, e procure pela tag (use CTRL+F):

]]></b:skin>

E acima da tag adicione o seguinte código:


/* ------- Bio Autor ------ */
.bio-autor{
background: #eeeeee; /* ---- Modifique a cor do fundo */
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
}
.autor-avatar{
float:left;
}
.autor-text{
color:#494949; /* ---- Cor do texto */
font-style:none;
font-size:12px;  /* ----- Tamanho da fonte */
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;
color:#777;
font-weight:bold;margin-top:-5px;
}
.autor-text a:link,
.autor-text a:visited{font-size:12px;text-transform:none;}



2º Passo: Introduzindo código da biografia

Acesse o Painel do Blogger >> Mais Opções >> Entre na página Modelo >> Clique em Editar HTML. Clique na caixa Expandir Modelos Widgets.

Agora procure pela tag:
<div class='post-footer-line post-footer-line-3'>

E abaixo da tag adicione o seguinte código:




<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.author == &quot;Nome do Autor 1&quot;'><div class='bio-autor'><div class='autor-avatar'><img alt='Nome do Autor 1' height='75' src='http://endereço-do-avatar-do-autor1' width='75'/></div><div class='autor-text'><h3>Sobre o autor</h3><p><b>Nome do Autor 1</b> - Coloque as características do autor 1 - recomendo até 4 linhas, coloque características para que combine com o tamanho do layout do seu blog.<a href='http://Endereço-do-perfil-do-autor-1'> Leia Mais sobre o autor...</a></p></div></div></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.author == &quot;Nome do Autor 2&quot;'><div class='bio-autor'><div class='autor-avatar'><img alt='Nome do Autor 2' height='75' src='http://endereço-do-avatar-do-autor2' width='75'/></div><div class='autor-text'><h3>Sobre o autor</h3><p><b>Nome do Autor 2</b> - Coloque as características do autor 1 - recomendo até 4 linhas, coloque características para que combine com o tamanho do layout do seu blog.<a href='http://Endereço-do-perfil-do-autor-2'> Leia Mais sobre o autor...</a></p></div></div></b:if></b:if>



Obs.:

   - Mude pele nome de autor 1 [o nome deve ser totalmente igual ao registrado no Blogger (ex.: João)
   - Mude pela endereço do avatar do autor 1, ou seja, o URL de uma imagem
   - Endereço do perfil, ou seja, aonde o leitor possa encontrar mais informações sobre o autor
   - Mude pelo nome do autor 2 [o nome deve ser totalmente igual ao registrado no Blogger (ex.: Ana)
   - Mude pelo endereço do avatar do autor 2, ou seja, o URL de uma imagem
   - Endereço do perfil, ou seja, aonde o leitor possa encontrar mais informações sobre o autor





SALVE, e pronto. 
Agora é somente entrar em qualquer postagem para ver o resultado.


Comentários

  1. Funcionando perfeitamente, tem como definir a cor da fonte pra cada autor ?
    A biografia de um na cor azul e do outro na verde por exemplo

    ResponderExcluir
    Respostas
    1. Que bom que está funcionando.

      Bem, sobre a cor da fonte, bem, sim é possível. Bem, estou trabalhando em criar um novo código que tenha essa opção com que o leitor entenda fácil. Pois o código de customização para cada autor é um pouquinho complicado. Então, vou criar um código fácil para que todos possam entender.

      Excluir

Postar um comentário

    Comentários que contenham em seu conteúdo seguintes temas: pornografia, palavrões, palavras ofensivas ou preconceituosas, spam, todas palavras em Caps Lock, não serão aceitos.