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 == "item"'><b:if cond='data:post.author == "Nome do Autor 1"'><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 == "item"'><b:if cond='data:post.author == "Nome do Autor 2"'><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.