sábado, 9 de março de 2013

Tutorial: Colocando imagem para cada autor da postagem

Tumblr_mh6js8j7tm1rvqosvo1_500_large
Hoooooooy genti  a pedido de uma leitora eu vou ensinar como colocar imagem para cada autor da postagem. Existem duas formas, ambas muito fáceis!
Para os blogs que tem uma equipe que colabora com o conteúdo - assim como eu tenho aqui no JD - é essencial aderir a uma assinatura no final de cada postagem. Dessa maneira além dos seus leitores identificarem facilmente quem fez o post, também é possível mostrar uma imagem personalizada para cada pessoa que faz postagens no seu blog. Lembrando que você pode criar sua assinatura usando o Photoshop ou outros editores de imagens que preferir. Eu por exemplo fiz a minha no photoscape mesmo. Aah e esse recurso pode ser usado tanto em blogs que possuem vários autores quanto nos que possuem um único autor, tá? 

Vou ensinar a vocês duas formas, que são essas:


Preview 1 - Essa primeira forma consiste em você fazer uma imagem para cada autor do seu blog. Eu usava ela e até acho que ficava mais bonito aqui no blog, mas a imagem não funcionava com todas as postadoras então achei melhor tirar e achar outra solução :c

Preview 2 - Essa forma é ainda mais simples, é só fazer uma única imagem escrito ''postado por'' ou ''escrito por'' e o nome de quem fez a postagem vai aparecer automaticamente.


Vamos começar! TUTORIAL 1 

Vá no seu HTML e cole o código abaixo logo após <div class='post-footer'> 

<b:if cond='data:post.author == &quot;AUTOR1&quot;'>
<img src='URL-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'>
<img src='URL-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>
</b:if>
 Entendendo o código:
AUTOR - Onde esta grifado de vermelho, coloque o nome do autor MAAAAS cuidado na hora de alterar o nome do autor (onde coloquei autor1, autor2), pois deve ser exatamente igual como está no perfil da pessoa. Caso contrário NÃO irá funcionar.
Por exemplo:
Meu nome está escrito assim: Jackie Zanini se no código eu escrever jackie zanini não vai funcionar, porque eu usei letras minusculas sendo que no meu perfil está em maiúsculo, entenderam?  

URL DA IMAGEM - É simples você vai copiar a url da imagem e colar no local indicado! Caso não saiba fazer isso clique aqui 

Quanto mais autores você queira com imagens personalizadas é só ir repetindo o código, ok? 

Visualize e se tiver tudo certinho, salve!

TUTORIAL 2 

Vá no seu HTML e marque a opção http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif expandir modelos de widgets. 
Procure por: <div class='post-footer'>

O código precisar estar mais ou menos assim: 

Daí você cola isso <img src='URL DA IMAGEM' style='border:0px;'/> igual está na imagem ABAIXO:
-
Fiz algumas imagens de exemplo, pode usar quem quiser:
 

P.S Pra personalizar a fonte igual no meu template é só usar este tutorial  >> aqui aqui <<


Gente o tutorial ficou grande porque são dois, daí vocês escolhem qual quer usar! Espero que gostem, beijus da jackie *w* 

64 comentários :

  1. Esse é um tutorial bem útil :)
    Por falar em autoras, queria saber se as vagas para a equipe do JD ainda estão abertas...
    camilaejustin.blogspot.com Beeijos >.<

    ResponderExcluir
  2. Amei , me ajudou muito ;p

    http://g-arotalevada.blogspot.com.br/

    ResponderExcluir
  3. Super legal o post,bem interessante !!

    http://www.youtube.com/GarotaUnicaBlog

    http://garotaunica10.blogspot.com.br/

    Beijos Mil!

    ResponderExcluir
  4. Estava procurando esse tutorial mesmo Jackie *---* obrigdada =D
    fashion em cores --.com

    ResponderExcluir
  5. mas no meu blog já ta escrito so que sem a imagem ai como eu tiro ?
    ah e tem uma campanha rolando la no blog participa !!
    www.mymomentsz.blogspot.com

    ResponderExcluir
    Respostas
    1. Pra tirar o escrito é só ir em layout>postagem no blog>editar>ai vc desmarca onde tá seu nome

      Excluir
  6. Muito bom o tutorial, e as imagens ficaram lindas *-*

    Beijos e ótimo final de semana! :)

    Blog ~~> Kiss of Gloss

    ResponderExcluir
  7. Oii amei seu blog e estou seguindo.
    Visita o meu ? ;3
    http://capricho-oficial.blogspot.com.br/

    ResponderExcluir
  8. Oi! Vou ver se uso esse tuto, parece ser bem legal ^^

    ~~My Crazy World

    ResponderExcluir
  9. Oi,adorei o post talvez use quando criar coragem e parar de ser preguiçosa pra mexer no HTML!
    Queria dizer quer adoro o seu blog,você me inspira!!!
    Tenho uma fanfic no meu blog se quiser visitar:http://bloginfinitoealem.blogspot.com.br/
    PS:Ainda está começando!!

    ResponderExcluir
  10. Jackie faiz pra mim um template gratuito tipo o seu prometo que colocarei sempre o seu nome no meu blog sempre colocarei a imagem para visitar o seu blog se você fazer um template pra mim.
    By: Camila

    ResponderExcluir
    Respostas
    1. Não faço Templates por encomenda guria :c
      Dá muito trabalho e no momento eu não tenho tempo!

      Excluir
  11. Jackie a imagem ficou muito alta , será que poderias fazer uma para mim? tipo que nem a sua com a cetinha fica melhor :) Beijos obrigada por enquanto ^^

    ResponderExcluir
    Respostas
    1. É só ajustar que dá certo *w*

      Excluir
    2. ajustei e fica a mesma coisa, testei a sua e ficou certinha mais não vou copiar de vc né Jackie.

      Excluir
    3. Se vc quiser pode usar eu não me importo *--*

      Excluir
  12. Ótimo tutorial. Gostaria de saber se há algum tutorial aqui ensinando a personalizar o "quem escreve" na barra lateral. Adorei como ficou o seu, e também tem aqueles que é apenas a imagem e quando a gente clica aparece uma pagina no blog com informações sobre o autor. Você sabe como fazer ou sabe de algum site que tenha esse tutorial? Obrigada!!!

    ResponderExcluir
    Respostas
    1. Hoy Carol!
      Pra personalizar o quem escreve como o meu eu recomendo este tutorial>> http://www.bunnycrazy.net/2012/12/tutorial-efeito-descricao-hover.html

      Mas você também pode criar uma imagem de perfil e adicionar links é muito simples.
      Olha aqui um exemplo que ei fiz no blog de uma amiga>> http://love-story8.blogspot.com.br/

      Excluir
  13. Obrigada por responder. Salvei esse tutorial para usar hoje, mas estou com um pequeno problema, a imagem ficou no lugar certo mas depois dela eu queria que aparecesse apenas o meu nome e aparece "Postado por: Meu nome". Como tiro o "Postado por"??? Muito obrigada pela atenção, meu blog está nascendo agora e o seu tá me ajudando muito.

    ResponderExcluir
    Respostas
    1. Magina guria!

      É só ir em Layout>postagens do blog>editar>
      daí você desmarca a opção
      postado por

      espero que ajude tá? beijus e sucesso com o blog *w*

      Excluir
    2. Valeu mesmo, eu fiz muitas alterações no meu blog com os seus tutoriais... Mas tenho só mais um problema, uso o mozilla, e aqui meu blog tá lindo, do jeito que eu queria... Mas quando abro no explorer ou crome fica completamente diferente. Se não for abuso, vc sabe como resolvo isso??? Obrigada mais uma vez, vc é ótima!!!

      Excluir
    3. Aaah nem me fale!
      Isso acontece comigo tbm :x mas no caso eu uso o google chrome e em alguns navegadores meu design fica todo deformado (ninguém merece!).

      Ainda não sei como resolver isso, mas em breve eu descubro uma solução *w*

      Por nada, beijus!

      Excluir
    4. Então assim que descobri posta que eu vou estar sempre por aqui!!!
      Beijos!!!

      Excluir
  14. Ameeeei o tutorial, muito obrigada!

    www.gabiimm.blogspot.com

    ResponderExcluir
  15. O meu n tem o codigo " div class= 'post- footer'>" : P

    ResponderExcluir
  16. UUUUUOOOOOUUUUUU te PLAGIARAM !! . Eu acho que sim por que a garotas copio o seu pot INTEIRO !!! . http://docemelody.blogspot.com.br/2013/03/tutorial-colocando-imagem-para-cada.html

    ResponderExcluir
  17. Olá, eu fiz o tutorial2 e não aparece a imagem :/
    Coloquei onde esta escrito! porque será que não funcionou? Obg

    ResponderExcluir
  18. jakiee me ajudaaa ! eu coloquei no meu blog a primeira imagem, so q ai eu quis tirar, mais não encontrei o codigo ! oque eu faço ?

    ResponderExcluir
  19. Hey Jackie!
    O meu é uma versão do blogger atualizada.
    Não tenho o popular "expandir widjets", e minha caixa para pesquisar o código não aparece!
    Isso está me impedindo de fazer muitas coisas!
    Consequentemente, não consigo colocar esse código.
    Você sabe como fazer isso na versão recente?

    XOXO

    www.blog-dreamsofagirl.blogspot.com

    ResponderExcluir
    Respostas
    1. é só ignorar (não atualizei o post)...
      procura o código que dá certo ;D

      beijos!

      Excluir
  20. Oi Jackie, bom primeiramente eu amei seu blog.
    Eu o achei hoje!! \o *.*

    Mas enfim, fiz tudo o que você explicou no tutorial 2, mas quando fui visualizar só apareceu postado por;
    Eu gostaria de saber como eu coloco o meu nome?
    Beijos e obrigada desde já!

    http://bloggdeumasonhadora.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Bruna *w*

      É só ir em layout> postagem no blog (editar) > e marcar a opção postado por.

      Espero ter ajudado beijos ;D

      Excluir
  21. Amei a postagem!Estava procurando isso,mas infelizmente não deu certo,eu tentei dos dois jeitos, e não funcionou! Você tem alguma solução? Eu fiz tudo como manda o tutorial.
    http://daydreamin-flowers.blogspot.com.br/

    ResponderExcluir
  22. O primeiro é meio chatinho mesmo.
    Porem o 2° pega é super fácil, tenta de novo que dá certo ;D

    ResponderExcluir
  23. Oi... fiz tudo como explicadinho... mas só fica a imagem escrito por... não aparece minha foto e muito menos meu nome.. o que fazer?

    ResponderExcluir
  24. Oi... fiz tudo como explicadinho... mas só fica a imagem escrito por... não aparece minha foto e muito menos meu nome.. o que fazer?

    ResponderExcluir
  25. Jackie vc liberou um modelo básico de layout para nós personalizar, e eu personalizei do meu jeito,só que muitas coisas nesse layout não funciona! E esse do autor também não funciona no meu html,igual com o de personalizar os comentários...Beijos

    ResponderExcluir
  26. Olá ! Eu queria saber como é que você conseguiu colocar no seu blog lá no topo o + acessados ! Será que você poderia fazer um post ensinado !
    http://blogcabidedamoda.blogspot.com/

    ResponderExcluir
    Respostas
    1. Até o final dessa semana eu faço um post sobre isso Vic (:

      Excluir
  27. oláa :D eu fiz do primeiro jeito mas a imagem do autor não aparece.. a do autor1 aparece certinho mas do autor2 não DD: será porque o autor2 é o adm? ou não tem nada a ver? se puder me ajudar eu agradeço *--* obrigada

    ResponderExcluir
    Respostas
    1. que estranho '-' comigo funcionou normal... tu fez o tutorial certinho? escreveu o nome do autor 2 como esta no perfil da pessoa?

      Excluir
  28. Olá jackie o meu nao funcionou que pena :(

    ResponderExcluir
  29. Procurei tanto pelo tutorial, e só o seu deu certo, os outros não avisavam que o nome do Autor teria que está do mesmo jeito que nas configurações do blog. Obrigada Jackie sua linda, por isso amo seu blog e você é claro <3

    Beijos *--*

    http://misteriodobrilho.blogspot.com.br/

    ResponderExcluir
  30. nossa super adorei a dica !!!!!

    parabéns

    http://luzcameraemakeupp1.blogspot.com.br/

    ResponderExcluir
  31. Não funcionou no meu pq?????

    http://cantinholohluh.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Não sei guria, provavelmente esta fazendo algo errado...

      Excluir
  32. Respostas
    1. Em qual parte do tutorial está com dúvidas?

      Excluir
  33. esse blog é uma bosta

    ResponderExcluir

.