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á?
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.
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:
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 == "AUTOR1"'>Entendendo o código:
<img src='URL-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == "AUTOR2"'>
<img src='URL-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>
</b:if>
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 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*
Esse é um tutorial bem útil :)
ResponderExcluirPor falar em autoras, queria saber se as vagas para a equipe do JD ainda estão abertas...
camilaejustin.blogspot.com Beeijos >.<
estão sim :p
ExcluirAmei , me ajudou muito ;p
ResponderExcluirhttp://g-arotalevada.blogspot.com.br/
Muito bom o tutorial *-* Parabéns!
ResponderExcluirSuper legal o post,bem interessante !!
ResponderExcluirhttp://www.youtube.com/GarotaUnicaBlog
http://garotaunica10.blogspot.com.br/
Beijos Mil!
Estava procurando esse tutorial mesmo Jackie *---* obrigdada =D
ResponderExcluirfashion em cores --.com
mas no meu blog já ta escrito so que sem a imagem ai como eu tiro ?
ResponderExcluirah e tem uma campanha rolando la no blog participa !!
www.mymomentsz.blogspot.com
Pra tirar o escrito é só ir em layout>postagem no blog>editar>ai vc desmarca onde tá seu nome
ExcluirMuito bom o tutorial, e as imagens ficaram lindas *-*
ResponderExcluirBeijos e ótimo final de semana! :)
Blog ~~> Kiss of Gloss
Oii amei seu blog e estou seguindo.
ResponderExcluirVisita o meu ? ;3
http://capricho-oficial.blogspot.com.br/
Oi! Vou ver se uso esse tuto, parece ser bem legal ^^
ResponderExcluir~~My Crazy World
Amei!
ResponderExcluirOi,adorei o post talvez use quando criar coragem e parar de ser preguiçosa pra mexer no HTML!
ResponderExcluirQueria 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!!
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.
ResponderExcluirBy: Camila
Não faço Templates por encomenda guria :c
ExcluirDá muito trabalho e no momento eu não tenho tempo!
obrigado!!!!!!!!!!!!!!
ResponderExcluirJackie 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É só ajustar que dá certo *w*
Excluirajustei e fica a mesma coisa, testei a sua e ficou certinha mais não vou copiar de vc né Jackie.
ExcluirSe vc quiser pode usar eu não me importo *--*
Excluironde eu colo o codigo? abaixo?
ResponderExcluirqual deles '-'
Excluir?
Ó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!!!
ResponderExcluirHoy Carol!
ExcluirPra 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/
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.
ResponderExcluirMagina guria!
ExcluirÉ 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*
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!!!
ExcluirAaah nem me fale!
ExcluirIsso 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!
Então assim que descobri posta que eu vou estar sempre por aqui!!!
ExcluirBeijos!!!
Pode deixar *w*
ExcluirAmeeeei o tutorial, muito obrigada!
ResponderExcluirwww.gabiimm.blogspot.com
O meu n tem o codigo " div class= 'post- footer'>" : P
ResponderExcluirO meu tbm nao :s
ExcluirUUUUUOOOOOUUUUUU 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
ResponderExcluirBrigada por avisar (:
ExcluirOlá, eu fiz o tutorial2 e não aparece a imagem :/
ResponderExcluirColoquei onde esta escrito! porque será que não funcionou? Obg
Não faço ideia :x
ExcluirOnde eu acho imagens pra colocar?
ResponderExcluirvc tem que fazer '-'
Excluirjakiee 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 ?
ResponderExcluirProcura pela url da imagem e apaga ;D
ExcluirHey Jackie!
ResponderExcluirO 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
é só ignorar (não atualizei o post)...
Excluirprocura o código que dá certo ;D
beijos!
Oi Jackie, bom primeiramente eu amei seu blog.
ResponderExcluirEu 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/
Obrigada Bruna *w*
ExcluirÉ só ir em layout> postagem no blog (editar) > e marcar a opção postado por.
Espero ter ajudado beijos ;D
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.
ResponderExcluirhttp://daydreamin-flowers.blogspot.com.br/
O primeiro é meio chatinho mesmo.
ResponderExcluirPorem o 2° pega é super fácil, tenta de novo que dá certo ;D
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?
ResponderExcluirOi... fiz tudo como explicadinho... mas só fica a imagem escrito por... não aparece minha foto e muito menos meu nome.. o que fazer?
ResponderExcluirqual dos dois vc esta fazendo?
ExcluirJackie 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
ResponderExcluirOlá ! Eu queria saber como é que você conseguiu colocar no seu blog lá no topo o + acessados ! Será que você poderia fazer um post ensinado !
ResponderExcluirhttp://blogcabidedamoda.blogspot.com/
Até o final dessa semana eu faço um post sobre isso Vic (:
Excluirolá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
ResponderExcluirque estranho '-' comigo funcionou normal... tu fez o tutorial certinho? escreveu o nome do autor 2 como esta no perfil da pessoa?
ExcluirOlá jackie o meu nao funcionou que pena :(
ResponderExcluirlegal
ResponderExcluirProcurei 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
ResponderExcluirBeijos *--*
http://misteriodobrilho.blogspot.com.br/
nossa super adorei a dica !!!!!
ResponderExcluirparabéns
http://luzcameraemakeupp1.blogspot.com.br/
Não funcionou no meu pq?????
ResponderExcluirhttp://cantinholohluh.blogspot.com.br/
Não sei guria, provavelmente esta fazendo algo errado...
ExcluirMe ajudem, não deu certo no meu blog.
ResponderExcluirEm qual parte do tutorial está com dúvidas?
Excluiresse blog é uma bosta
ResponderExcluir