Como colocar descrição dos autores no final dos posts do Blogger

Como colocar descrição dos autores no final dos posts do Blogger

6 10 99
Como colocar descrição dos autores no final dos posts do Blogger 10 6 99
Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recente template do Dicas Blogger. Vou tentar explicar, mas já adianto que o procedimento não é muito simples, sendo necessário ter conhecimentos em CSS.

Na imagem abaixo, vemos a minha descrição em um post recente:

Descrição do autor
Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá?

Etapa 1:
Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo ANTES  da tag  ]]></b:skin>

**Para encontrar a tag, dê um Crtl+F com seu teclado e cole ]]></b:skin>

**Para entrar no HTML, veja este post - Como editar HTML na nova interface

/* 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;
}
Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho.

Etapa 2:

Depois, 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 que receberá a descrição exatamente como está nas postagens.
  • 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 a etapa 2 para cada um deles.

Se você não sabe como obter a URL da imagem, leia este post: Como hospedar imagens no Picasa

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

Vejam o resultado desse código no blog da Priscila:

Blog Priscila Fago
Como eu disse anteriormente, trata-se de um hack complexo então é preciso bastante atenção.

23 Comments
Comments
  1. Achei a dica muito boa e acho que consigo fazer de tanto que ando estudando sobre blogs. Só tenho uma duvida, estou criando um blog com meu namorado e nós dois vamos escrever, tem como colocar os dois perfis? E apenas aparecer o de quem está escrevendo?

    ResponderExcluir
  2. Sandra,
    "Atenção! Se o seu blog tiver mais de 1 autor, repita a etapa 2 para cada um deles."
    Att, Juliana

    ResponderExcluir
  3. Não consegui fazer. Meu blog só tem um autor e aparecem dois <div class= etc no html do meu. Coloquei o código abaixo de cada um por vez, e até ao mesmo tempo e nada.

    Como proceder agora?

    ResponderExcluir
  4. Nossa! muito bacana, sempre quis saber como colocar isso!
    rsrsrs agora já sei! valeu pela dica!

    ResponderExcluir
  5. Obrigado Juliana me ajudou demais estava a 4 horas pesquisando um tutorial que desse certo porém todos davam erros e você foi a unica que fez um artigo que realmente me ajudou agradeço de coração

    ResponderExcluir
  6. Infelizmente não conseguir usar este recurso. Mesmo inserindo os codigos corretamente, não aparece de forma nenhuma. Usar o Perfil do google plus pode ser o problema?

    ResponderExcluir
  7. Olá Juliana
    Conseguir adiciona ao meu blog, só que essa opção fica ativa apenas para mim, para exibir a dos outros editores como faz. você informou que precisa de conhecimento em CSS é possível encontra na internet.
    Aguardo

    ResponderExcluir
  8. Legal, Juliana.
    Um pouco trabalhoso como vc mesma mencionou, mas acho que vale a pena. O texto parece ficar mais profissional dando essa ênfase no autor.
    Vou tentar com calma no meu.
    Abraço.

    ResponderExcluir
  9. Ola priscila ! quero saber se da para fazer com que a descrição do autor apareça só uma vez abaixo do post ou seja que ela nao se repita ?

    ResponderExcluir
  10. Priscila muito obrigado de todos os tutoriais que eu encontrei o seu foi melhor . Parabens

    ResponderExcluir
  11. Deu certo. So gostaria de saber se existe alguma forma de aparecer sempre na pagina inicial tb. Pq so aparece quando vc entra no link da postagem.
    Mas esta de parabens pelo codigo!

    ResponderExcluir
  12. Ok, sou uma usuária bem avançada, mas não acho esse hack complicado não! Uso um parecido no meu blog; só que mais simplificado. Como só eu escrevo, não tem a necessidade de adicionar a condicional de autor; e fiz umas paradas com CSS3 para deixar o box 'escondido', para limpar um pouco o footer dos posts. Haha

    ResponderExcluir
  13. Olá Tudo bem,

    Já algum tempo me utilizo de algumas dicas de vocês, e quero deixar aqui os meus parabéns, pela forma como vocês ensinam.
    Esse postagem em especial eu não consegui fazer, ops, quer dizer, eu fiz tudo, porém nada aparece.
    A segunda etapa você pede para que eu procure por uma tag, no meu template aparece 2 desse, eu fiz o teste nos 2, mas não deu certo.
    Será que você pode me ajudar.
    Obs.:Mesmo sem efeito deixei os códigos lá instalados.

    ResponderExcluir
  14. Esse hack estava funcionando direitinho no meu blog, mas hoje eu percebi que não estava mais aparecendo. Joguei o código no blog outra vez e nada. Acho que o Blogger parou de aceitar esse hack o-o

    ResponderExcluir
  15. Como faço para colocar a foto e nome do autor da postagem ao lado do título?

    ResponderExcluir
  16. Oi, me tira uma dúvida? Eu repito a parte 2 do código para colocar mais uma biografia para um outro autor. Mas como o Blogger vai saber quem é o autor? Tipo, que conexão teria com a conta de um outro ator, que automaticamente apareceria nos posts dele?

    ResponderExcluir
  17. E encontrei essa dica justamente no momento mais necessário! Obrigado pessoal do Dicas Blogger que vem há tempos me ajudando sempre que preciso!
    Abs!

    ResponderExcluir
    Respostas
    1. Opa Sérgio! Que maravilha hein, seja sempre bem vindo ;)

      Excluir
  18. O segundo código quando coloquei no local indicado nesse post nao apareceu, só quando colei acima do código do disqus (sistema de comentários terceirizado).

    De qualquer forma obrigado.

    ResponderExcluir
  19. Fantástico. O simples as vezes assume ares de complicado, mas este post muito bem escrito resolve a questão. Parabéns

    ResponderExcluir

ATENÇÃO: Caso esteja com dificuldades com seu blog, abra um tópico no Fórum de Ajuda do Blogger que nós iremos te ajudar a resolver.


Os comentários passam por um sistema de moderação. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;

 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top