Como colocar descrição do autor no final das postagens do blogger

Crie uma descrição do autor das postagens no blogger, com a possibilidade de personalizar.

Você que sempre quis colocar sua autoria nas postagens de seu blog, siga os passos e personalize com foto, cores, links e mais.


 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

1º Passo: 

Acesse o painel de seu blog, no menu clique em "Modelo", depois "Editar HTML".

2º Passo:

Clique no código, pressione "CTRL + F" para pesquisar e procure a tag
 ]]></b:skin> 
Cole o código abaixo logo ACIMA da tag pesquisada.
/* Autores
----------------------------------------------- */
#post-footer-autor {
width: 100%;
height: 77px;
background: #e6e6e6; /*Cor do plano de fundo*/
border: #ccc; /*Cor da borda*/
margin: 8px 0px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; /*Espessura da borda*/
}
#autor-img {
width: 64px; /*largura da imagem*/
height: 64px; /*altura da imagem*/
background: #fff; /*plano de fundo da imagem*/
float: left;
margin: 7px;
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #333; /*Cor do texto*/
}
#autor-sobre a{
color: #3d85c6; /*Cor dos links*/
text-decoration:none;
}
#autor-sobre a:hover {
color: #9A9A9A; /*Cor dos links ao passar o mouse*/
text-decoration:underline;
}
* As partes destacadas em vermelho mostra o que você pode alterar no código, personalizando a seu gosto como: cores de plano de fundo, bordas, links e texto.

3º Passo:

Agora procure por <div class='post-footer'> e cole ANTES dessa tag o seguinte código:
<!-- Resumo dos autores-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nome do autor&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/>
</div>
<div id='autor-sobre'>
<p>
<b>Sobre o autor:</b>
Faça uma breve descrição. <a href='link'> Nome do link</a></p>
</div>
</div>
</b:if>
</b:if> <!--Resumo dos autores Final-->
Antes de salvar, faça as seguintes alterações: 
* Em  Nome do autor, escreva o nome do autor ;
* Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64.
* Em Faça uma breve descrição, escreva algo sobre o autor.
* Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em Nome do Link escreva o nome da página que está sendo linkada.

Atenção! Se o seu blog tiver mais de 1 autor,  repita o 3º passo para cada um deles.

Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo".

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN