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".
Odnei Sales
Odnei Sales

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

Nenhum comentário:

Postar um comentário