André Felipe

Adicione um avatar ao lado dos títulos dos posts

Questionaram-me sobre como adicionar um avatar (uma imagem) ao lado dos títulos de posts, assim como em André Felipe.net. Neste guia, mostro como é simples.:)

  • Edite a imagem que deseja utilizar. Deixe-a nas proporções adequadas e a hospede, por exemplo, no Imgur;
  • Abra o painel do Blogger e clique em LayoutHTML;
  • Marque a opção Expandir modelos de widgets;
  • Procure a linha <b:if cond='data:post.title'>;
  • Acima dela, digite, após substituir as partes em negrito pelos valores correspondentes a sua figura: <img src="endereço da imagem" width="largura" height="altura" alt="Avatar" style="float:left;margin:0 5px 5px 0" />

Salve o código e abra qualquer texto seu. Verá sua representação gráfica em todo o esplendor.8-D

Imagens diferentes para cada autor

Se você tiver um blog com mais autores, poderá adicionar um avatar diferente para um. Assim, os leitores identificarão rapidamente quem escreveu cada post. Basta adicionar um código extra por volta da imagem, como neste exemplo, que mostra uma figura específica para as publicações de João":

<b:if cond='data:post.author == "João"'><img src='http://www.example.net/joao.gif' height='50' width='60' alt='Avatar'/></b:if>

47 comentários:

  1. Hey, excelente post e era mesmo isso que eu estava à procura, mas preciso de ajuda na segunda parte ou seja, personalizar os avantares para vários contribuidores do blog, a explicação não é muito explicíta, e ao tentar algo correu mal.

    Basicamente, somos 4 contribuidores, como configurar de modo a que cada um dos 4 tenha o seu próprio avantar a cada postagem que faz.

    Obrigado desde já

    ResponderExcluir
  2. Basta copiar e colar o código quatro vezes, substituindo "João" pelos nomes de exibição de cada colaborador. O seu, por exemplo, é JUST DONT DO IT.

    ResponderExcluir
  3. Andre,tentei por uma avatar nos posts e deu certo mas qd tentei colocar um para cada colaborador do blog, não aparece nada ¬¬.
    como devo fazer?

    ResponderExcluir
  4. lol cara parabens por isso so seu fan continua assim blz

    ResponderExcluir
  5. Rock Lee, obrigado pelo apoio! :)

    Atelietes, pode colar o código que usou em pastebin para eu dar uma olhada?

    ResponderExcluir
  6. manin so uma coisa eu tentei bota avatar do lado do titulo mais fico encima eu fiz um sertinho pra bota sobre uma barra mais o avatar n fica do lado do titulo fica encima quando vai bota pra varios postadores ^^ como faço?

    ResponderExcluir
  7. Rock Lee, a parte float:left do código especifica exatamente que o avatar deve ficar ao lado do que vier a seguir. Digitou mesmo acima de <b:if cond='data:post.title'>?

    ResponderExcluir
  8. andré,

    já resolvi o problema :)
    mas obrigada pela atenção^^

    nem preciso dizer que seu blog é show!
    PARABÉNS!

    virei fã já!

    ResponderExcluir
  9. me add msn q so meio lezadim sabe '-' n entendi nada =D rafamega77@hotmail.com ^^ vlwz

    ResponderExcluir
  10. Cara, esse é o tipo de Post que gosto de ler, um post bem explicado, perfeito.
    só queria saber uma coisinha, não é muito importante, mas, tem como eu por o avatar, tipo, do lado do titulo da postagem? Igual naqueles sites em PHP de animes, algo assim:
    "(Avatar)Assunto[Titulo da postagem],
    Data"
    Mesmo se não tiver como, cara, você me ajudou muito.
    Abraços,

    Rock Lee ali é amigão meu, eu ajudo ele
    :)

    ResponderExcluir
  11. Fábio, você pode colocar onde quiser, se souber CSS. Basta posicionar os códigos nos locais apropriados e editar a folha de estilos.

    ResponderExcluir
  12. cara ainda n consegui tipo assim eu boto o avatar blz mais quando e o da equip não fica do lado fica encima do titulo sabe ae tem como se me manda o codigo pra equip fica sertinho do lado do titulo?

    ResponderExcluir
  13. Rock Lee, copie o código do seu template para o pastebin e deixe o link aqui.

    ResponderExcluir
  14. Muito bom seu post, parabéns!

    Eu disponibilizei em meu blog 114 avatar´s para aqueles que não querem utilizar sua foto como avatar. Gostaria de sua autorização para colocar o link direto do meu post para os avatares.

    Abraço e sucesso ao seu blog!

    ResponderExcluir
  15. opa, valeu aí pela dica andré, depois de um bom tempo, consegui por o avatar lá, abraços!

    ResponderExcluir
  16. Marco, não entendi. Precisa de minha autorização para colocar um link em seu post para os avatares que disponibilizou em outro site? :p

    f4binhuu, que bom! ;) Às vezes demoramos para conseguir fazer algumas coisas mesmo, mas com a prática entendemos melhor os códigos.

    ResponderExcluir
  17. eu gostaria de saber como fazer isso no webnode, tem como?

    ResponderExcluir
  18. cada dica bem legal tem no seu blog vc é De mais cara!

    ResponderExcluir
  19. Felipe,para cada adm não fica do lado do titulo e sim em cima.
    oq devo fazer?

    ResponderExcluir
  20. Mano xtas ajudar-me muito!!!!!!!!

    ResponderExcluir
  21. ai o meu avatar ta dando certo mas quando eu coloco do autor do blog ele fica ao lado do meu como eu faço pra ele ajustar

    ResponderExcluir
  22. aff eu tbm ele fica em cima do post me explica ae

    ResponderExcluir
  23. Show de bola funcionou msm obrigado ^^

    ResponderExcluir
  24. André, antes de mais nada, muito boa essa dica, funcionou beleza no meu blog. Mas, eu queria te fazer uma pergunta: É possível em só 1 post eu retirar o avatar?

    Tipo, são varios autores e cada um tem seu avatar, ai o q eu quero saber é se teria como, é uma das postagens, fazer com q o avatar não apareça.
    Vlw.

    ResponderExcluir
  25. Pessoal, para ajustar corretamente é necessário configurar as opções de estilo com CSS. Visitem um fórum de webdesign para aprender como aplicar posicionamento, cores etc. do modo exato como querem.

    iBoss, coloque isto em volta do código do avatar, após substituir a URL de exemplo pela da página onde não quer que apareça a imagem:

    <b:if cond='data:blog.url == &quot;http://www.example.net&quot;'>

    </b:if>

    ResponderExcluir
  26. perfeito...estou usando.
    parabéns, funcionou perfeitamente

    ResponderExcluir
  27. Muito Bom o post ,fazia tempo que esava procurnaod esse post !

    ResponderExcluir
  28. Gostei da idéia, vou fazer um plug-in para o Wordpress

    ResponderExcluir
  29. eu não consigo achar essa linh

    ResponderExcluir
  30. É o seguinte pessoal eu não percebi patavina da segunda parte preciso de ajuda. O meu blog tem 2 dois membros e não sei como adicionar o avatar dele.

    ResponderExcluir
  31. Ola eu instalei tudo certinho, mas ao inves do avatar fica certo no post, ele fica em sima tipo olha uma screen!!!

    http://img84.imageshack.us/img84/3892/buge.png

    Ae minha pergunta é: Como eu faço para posicionar esse avatar certinho ao post??

    Me envie um email
    luciotsamp@hotmail.com

    Este site é 10!!!

    Aguardo resposta

    ResponderExcluir
  32. Apenas funciona 2 avatares , 1° não esta funcionado e os outros 2 códigos estão normais, provavelmente não vai funcionar mais outros porque testei com outros autores e tbm não funcionou.

    Veja http://pastebin.com/hwTyFGmR << Postei ai para vc da uma olhada.

    Vlw parabéns pelo tuto ;)

    ResponderExcluir
  33. Nao consegui, nao consegui achar esse codigo no meu template.
    sera por que ?


    se tiver resposta me manda um email ta bom.

    Email : andrewpinheirodasilva@hotmail.com

    Obrigado vlw

    ResponderExcluir
  34. ae Y.Slade vlw deu certo, agora consegui fazer o que eu queria com esse seu codigo de exemplo q mostrou!!!

    Ou naruto animes, la em designer - editar HTML - tem uma opção com nome expandir widgets veja na imagem abaixo!!!

    http://img265.imageshack.us/img265/2460/semttulohk.png

    ResponderExcluir
  35. Tenho um blog com uma amiga, e não entendi como colocar os avatares :S... pode me adicionar no msn para me explicar melhor??

    Abraços

    ResponderExcluir
  36. meu msn é...
    leonardoalves_garcia@hotmail.com

    esqueçi de colocar no comentário anterior ¬¬'

    ResponderExcluir
  37. Olá!!! \Õ/
    Muuuuito obrigada pela dica,usei seu código em meu blog e ficou perfeeeito!!!
    Obrigaada mesmo,fazia tempo q eu queria colocar imagem ao lado do post...rsrsrs

    beijoss...♥
    http://backstreetmorgan.blogspot.com

    ResponderExcluir
  38. o cara to uma duvida concegui colocar os avatares meu e do meu autor so que o dele não aparece o titulo oq posso fazer para resolver o problema ?

    ResponderExcluir
  39. vlw era Isso q eu tava Buscando

    ResponderExcluir
  40. Rapaz... não consegui colocar pelos códigos não!
    Coloquei o código antes do título do post e deu certo kkkk!
    Valeu pela dica.

    ResponderExcluir
  41. LOL mto bom vlw ^^

    ResponderExcluir
  42. Cara add msn pq eu fiz tudo e tals mais do msm geito do lado de la --> e em cima do titulo

    ResponderExcluir
  43. Favor quem conseguiu ADD Msn pq eu n consegui Adrian_asdc@hotmail.com

    ResponderExcluir
  44. Este comentário foi removido pelo autor.

    ResponderExcluir

💬 Mostrar comentários