Colocando a descrição do autor no final das postagens do Blogger

Você já deve ter tido a vontade de ter o seu nome no final dos postes não é mesmo? Eu particularmente  acho sofisticado e também uma forma de o visitante saber mais sobre você, sobre seus ideais e suas ideias. Pois, bem! Essa é a hora de realizar a sua vontade com esse tutorial abaixo

Mas antes de começar lhe recomendo fazer um backup do seu template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Agora sim vamos ao que lhe interessa.
VAMOS APRENDER COMO COLOCAR A DESCRIÇÃO DO AUTOR DO BLOG NO FIM DE CADA POSTAGEM:

1º Passo: Acesse o painel de seu blog, no menu clique em "Tema", depois "Editar HTML".

2º Passo: Clique na caixa de código html, pressione "CTRL + F" para pesquisar e procure pela tag  ]]></b:skin>

Cole o código abaixo logo ACIMA da tag pesquisada.



/* Autores no fim dos posts ----------------------------------------------- */ #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-->


AGORA VAMOS ÀS CONFIGURAÇÕES FINAIS
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.

NOTA: 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".

Postar um comentário

0 Comentários