Melhores Dicas para Blogs

Mostrar Imagem Diferente para Cada Autor da Postagem no Blogger

Alguns blogueiros permitem que outras pessoas façam postagens e assim tem um blog compartilhado, mas além de mostrar o nome de quem fez a postagem também é possível mostrar uma imagem diferente para cada pessoa (perfil) que faz postagens no seu blog.

Mas antes de continuar queremos lembrar mais uma vez que não é necessário dar direitos de administrador para alguém poder postar no seu blog, somente um convite para participar do blog já é o suficiente, veja mais aqui: Varias Pessoas Fazendo Postagens - Blog Compartilhado E cuidado se der direitos de administrador para alguém, pois essa pessoa poderá fazer tudo então faça isso somente com quem você realmente conhece e confia.

imagem do autor da postagem no blog
Voltando ao assunto de hoje: colocar uma imagem junto com o nome do autor de cada postagem. O procedimento é relativamente simples: o primeiro passo é ter a imagem que vai mostrar, caso precise de ajuda para fazer e hospedar a imagem veja esses links:

Editor de Imagens, Fotos e Banners Online
Hospedar Arquivos Grátis no Google Sites

Quando já tiver a imagem pronta e hospedada entre na pagina editar HTML do seu blog e clique para expandir o modelo. Nós recomendamos salvar uma cópia do seu template antes de fazer qualquer alteração, assim se tiver problemas poderá restaurar seu blog facilmente - Backup do Blog - Salvar Template e Posts

Procure por: <div class='post-footer'>, talvez no seu template não seja exatamente igual, mas deve ser bem parecido com isso e logo depois dele coloque esse código:

<b:if cond='data:post.author == &quot;AUTOR1&quot;'>
<img src='ENDEREÇO-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'>
<img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>
</b:if>

Usamos como exemplo 2 autores para o blog, mas você repetirá esse código para quantos autores seu blog tiver.

Muito cuidado na hora de alterar o nome do autor, onde colocamos autor1, autor2, pois deve ser exatamente igual está no perfil da pessoa. Quando testamos o código para fazer este tutorial o código não funcionou se usamos letras minúsculas, pois meu perfil está com a inicial maiúscula, ou seja, quando usei no código Fabiano Roberto, deu tudo certo, mas se colocar fabiano roberto o código não funcionou (imagem não apareceu). Sobre problemas com o código ou imagens recomendamos ler:

Imagem não aparece no Blog ou Site
Porque os códigos não funcionam no blog

No código você pode alterar o lado que a imagem aparece trocando a palavra left por right.

Se quiser usar a imagem com link, então no lugar de: <img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>

Use o código desta forma:
<a href="link da pagina"><img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/></a>

Esperamos que gostem e seja útil para quem divide o blog com outras pessoas, afinal usando as imagens diferentes no final da postagem do blogger ficará mais fácil identificar quem é o autor cada post publicado. Related Posts with Thumbnails


Link desta Pagina

76Comentários:

Iguinho__- HQ disse...

Olá Fabiano! Eu queria falar uma coisa BEM FORA do assunto do post! Eu queria saber, que quando você posta um link, ele abre em outra aba! Mas no meu blog ele sai na página que o blog está aberto! Como você faz isso?

Fabiano Roberto disse...

só precisa usar o target=blank, assim:

<a href='http://www.dicasparablogs.com.br/2011/08/mostrar-imagem-diferente-para-cada.html'target="_blank">Mostrar Imagem Diferente para Cada Autor da Postagem no Blogger</a>

deste jeito o link abre numa nova aba ou janela, mas se tirar o trecho target blank ele vai abrir na janela atual

Anônimo disse...

Eu sei que não tem a ver com o assunto, mas estou com a dúvida:
COmo faço para ter um menu no meu blog, que já que ele é de filmes, vou dar um exemplo como gostaria:
Filmes
Aventura
ação
...
Etc. Obrigada preciso muito de sua ajuda.

Matheus disse...

Cara, como que eu faço para que uma imagem apareça no topo de todas as postagens que eu fizer?

Fabiano Roberto disse...

Anônimo
isso são os marcadores do blog, veja aqui: Colocar Marcadores no blog

Matheus

sobre colocar uma imagem no titulo, veja esse tutorial: Imagem no título da postagem

Os Melhores Produtos disse...

Este Dicas é muito bom. Acabei de criar minha página Facebook pelo seu tutorial. Valeu!

ツ•●ℓєαη∂яσ αℓνєѕ●•ツ disse...

Fabiano, estou enfrentando uma espécie de bug no blogger.
é o seguinte: Quando eu quero adcionar um elemento para o hmtl (Editar layout) vai de boa, até a hora de salvar.
O normal seria, eu fazer as alterações e fechar automaticamente logo depois de encerrar as alterações. Mas isso não acontece. não salva.
e sem salvar, não consigo alterar o visual do meu blog por completo.
vc sabe oke houve?
pf se tiver uma solução, me envie por e-mail? é lalvesevangelista@gmail.com

vlw galera! boa sorte ppra vcs! õ/

Fabiano Roberto disse...

ツ•●ℓєαη∂яσ αℓνєѕ●•ツ
já tentou adicionar um gadget... que tipo de elemento de html está querendo?

João Bosco Guimaraes Mafra disse...

Trata-se de uma dica diferente e divertida também.

João Bosco
jotabemafra.blogspot.com

Marianna disse...

Caramba adoro esse site, já me ajudou muito, aprendi muito mais uma vez

trabalhos manuais disse...

obrigada pela dica; muito boa, Beijos

EGO disse...

Sinceramente, nao consegui, nao vi diferença, logo após eu colo aonde? na linha de baixo? oq eu tenho q substituir?

Fabiano Roberto disse...

EGO
não sei qual trecho não conseguiu visualizar... explique melhor sua duvida

Sérgio Felipe disse...

Bem legal isto, pena que é no blogger, eu uso wordpres!

Tem como fazer isto usando o Wp?

Fabiano Roberto disse...

Sergio Felipe
essa vou ficar devendo pois não utilizo o wordpress... (ainda)

Salvo Sim! disse...

Olá fabiano! no blog Minilua.com quando você passa o mouse e arrasta em cima de algum texto, o fundo fica VERMELHO, eu não consegui achar aqui a postagem sobre isso! (que eu sei que deve ter!) to precisando muito D: obg pela atenção. att, eu vou procurar aqui! flw

Fabiano Roberto disse...

Salvo Sim
está falando de selecionar o texto?... é normal mudar de cor

Salvo Sim! disse...

Não, não.......... na verdade eu estava falando de como eu consigo fazer mudar de cor, e colocar as cores que eu quiser, porque no meu, quando clica e arrasta, o fundo fica AZUL e o texto BRANCO, e o que eu quero, é fazer o texto ficar PRETO, e o fundo ficar VERMELHO, quando clicar e arrastar no texto ;D comofaz?

Salvo Sim! disse...

Eu achei um trecho, e acho que tem algo com isso: moz-selection{background:#FF2200;color:white;}

Fabiano Roberto disse...
Este comentário foi removido pelo autor.
Fabiano Roberto disse...

legal, eu ainda não conhecia isso.... alias nunca tinha pensado sobre o assunto

Salvo Sim! disse...

HEUhEuhEuHEuHEuEH caçei em tudo que é canto aqui no meu html pra colocar isso, fiz quase um loop, mas não consegui.... =/ e o que eu to caçando mesmo agora, é colocar um negocio, como o do blog Acordadiabo.com.br, que quando você clica no titulo da postagem, lá no RODAPÉ da postagem aparece um quadrado, e nele tem um link curto da postagem, em cima escrito: URL curta dessa postagem...

Fabiano Roberto disse...

Salvo Siim
ainda não tenho tutorial sobre isso, mas vou preparar... já tinha visto esse tipo de site que mostra a url encurtada...

assim que possivel vou fazer um tutorial

Salvo Sim! disse...

vou conversar com você por email =P nossa conversa aqui nos comentários ta ficando longa demais! AEUHAEuiHAE

Fabiano Roberto disse...

ok

Lucio disse...

Fabiano, queria saber como fazer para colocar Foto+Descrição do Autor do post.
Pode ter um post sobre isso

Fabiano Roberto disse...

Lucio
junto com o código da imagem você pode escrever algo se quiser, deste jeito:

<b:if cond='data:post.author == &quot;AUTOR2&quot;'>

<img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/> essa é a descrição deste autor
</b:if>

Anônimo disse...

Oi seu post é o mais proximo que eu achei do que eu to procurando. eu ja achei como fazer uma listagem apenas dos titulos do blog por categoria. agora eu queria alem do titulo colocar uma miniatura da imagem que eu utilizei em cada post.

volto depois pra ver a resposta

David

Fabiano Roberto disse...

vou preparar um tutorial sobre lista de posts por categoria

Anônimo disse...

Fico no aguardo

David

Ben disse...

não fucionou no meu blogger não apareceu nada de diferente

Fabiano Roberto disse...

veja se não errou algum detalhe na hora de alterar o código... qualquer sinal a mais ou faltando dá erro

Randromedo disse...

e como e que as imagems vao aparecer quando os outros autores postar

Fabiano Roberto disse...

Randromedo
depois que colocar os códigos como mostramos aqui a imagem de cada postador do seu blog aparece automaticamente

Luiz_Liber-Endo disse...

Olha Eu Gostaria de Saber Uma Coisa Simples, No Blog normal o Autor da Postagem e a Sua Imagem Sai no Final do Conteúdo, tem como Colocar o Autor da Postagem e o Conteúdo Pra Cima da Postagem?

Luiz_Liber-Endo disse...

Fabiano, No meu Blog e na maioria é normal aparecer no final dos posts, gostaria de saber se dá pra colocar em cima dos posts?

Fabiano Roberto disse...

Luiz_Liber-Endo

aqui tem um tutorial sobre mudar coisas de lugar e colocar embaixo do titulo: Mostrar Marcadores, Comentários embaixo do Título da Postagem

então se em vez de fazer como dissemos no tutorial para apagar o código do nome do autor e colocar o outro no mesmo lugar. Você pode apagar e ver no link acima como colocar embaixo do titulo

Jűηϊσr_Ðjjr〆 disse...

Fabiano, vc poderia dar mais valor aos templates criado no Artisteer, pois nao eh possivel fazer nem a metade dos tutoriais de html daqui em um template criado pelo Artisteer...
pois nao tem os msms nomes...
Um exemplo nesse tutorial, eh q nao tem o "div class='post-footer'", o unico nome mais parecido q tem, eh o ".art-postfootericons", entao, como q eh possivel colocar isso em um template do artisteer?
tente fazer algum tutorial sobre isso... exemplo: o "div class='post-footer'" em um template do artisteer eh o msm q ...sei lah, o ".art-postfootericons" (isso eh soh um exemplo, acho q nao sao os msms)
tente fazer um tutorial falando sobre isso, pois quero muito usar algumas dicas aqui, mas nao dah
Ficaria muito agradecido!

Jűηϊσr_Ðjjr〆 disse...

ops, mals, esqueci de press em "Expandir modelos de widgets" para procurar
mas msm assim, oq eu disse tah certo... muitos tutoriais aqui nao tem jeito

Fabiano Roberto disse...

muita gente esquece de marcar para expandir o modelo...

Ben disse...

ficou bem legal valleu

Ben disse...

Preciso de ajuda!! eu coloquei em mim e deu certo quando eu posto aparece a imagem, mais agora eu estou com um novo postador, coloquei nele com o nome que esta no perfil igualzinho e tambem o link direto da imagem mais o dele não aparece e o meu sim retirei diversas vezes o código do meu e o dele e colocava denovo mais o meu continua aparecendo e o dele não??

Fabiano Roberto disse...

@Ben o unico jeito é modificar o código adicionando essa outra pessoa. não tem outra maneira de fazer

Anônimo disse...

Fabiano Graças ao seu site eu to conseguindo mexer melhor no meu blog . espero que continue assim ... :)

• Ja disse...

Eu não consegui...
Não aparece nenhuma imagem!
o código é pra colocar acima ou depois do '<div

Fabiano Roberto disse...

• Ja
provavelmente o endereço da imagem está errado, veja aqui: Imagem não aparece no Blog ou Site

Matt Strife disse...

Ei Fabiano, eu coloco a imagem ma ela aparece em baixo do post(na esquerda mesmo).Como arrumo? Quero que fica ao lado do titulo como no template "Naruto Bayo". Obrigado!

See
Yaa!!!

Fabiano Roberto disse...

Matt Strife
veja aqui: Imagem no título da postagem

Matt Strife disse...

Desculpe mas acho que não entendeu. Eu quero que cada membro do blog tenha uma img(já fiz), mas queria que a img ficasse onde está quela do post que me passou mesmo. Mas ao invés de uma img qualquer, eu queria a de cada membro. Olhe como está a img http://testepratudomesmo.blogspot.com

Fabiano Roberto disse...

isso é um pouco mais complicado porque tem que achar o lugar certo no html do seu blog.

no html do seu blog deve ter: < h3 class='post-title entry-title' >.... e outras tags aqui.

então coloque o código das imagens dos autores antes desta linha e veja se funciona como está querendo

Matt Strife disse...

Ah, desculpe o encomodo... fuçei e consegui... obrigado por passar a linha ^.^'

See
Yaa!!!

Camila e Karina Jardim disse...

Olá Fabiano, muito legal suas dicas, estão me ajudando bastante! Mais tenho uma dúvida: Eu segui o passo a passo desse post e conseguicolocar a imagem como link no final de cada postagem, mais ao clicar na imagem (no link), dá como página não encontrada, você sabe porque isso aconteceu?
Aguardo, obrigada
Camila

Emmanoel Belo de Souza disse...

queria saber como fazer essa mesma coisa com os marcadores do blogger, como nesse site:
www.nintendoblast.com.br

Fabiano Roberto disse...

acho que não tem como fazer isso automaticamente com os marcadores

ou até seria possivel mas precisa de muitos detalhes.

vou fazer alguns testes e se possivel um tutorial sobre o assunto.

Suka disse...

Olá Fabiano, adoro seu blog e sempre tem me ajudado muito... mas infelizmente eu não consegui fazer isso, você fala para achar: "class='post-footer'" ou algo parecido, aí é que está o problema, não achei nem igual, nem parecido... rsrs
;p
Me ajuda por favor???
bjos

espacodasuka.blogger.com

Fabiano Roberto disse...

procure por post-footer-line-1 ou algo parecido isso varia conforme o template

< div class='post-footer-line post-footer-line-1' >

Daniel disse...

oi fabiano mto bom o post, eu ja fiz as imagens dos postadores e ja hospedei, mas meu template não tem esse codigo assima, eu achei a parte que mostra o footer da postagem mas não sei onde coloca, o codigo do post footer do meu blog é assim:

.post-footer {
background: url() no-repeat;
padding: 25px 0px 0px 0px;
font-size: 20px;
margin: .75em 0;
color:#000;
letter-spacing:.1em;
line-height: 1.7em;
}
.post-footer a{
color: #000000;
}
.post-footer a:hover{
color: #000000;
}

por favor me ajuda

Fabiano Roberto disse...

pode colocar esse código se não tiver
background-image: url(endereço da imagem)

Andson Boa Sorte disse...

muito bom mas o que falta no seu blog, são os detales, para quem não sabe muito de html fica muito dificel editar. valeu.

Renan disse...

vlw Fabiano!!!!!!!!

Hellion Katsu - カツオ disse...

Já tentei de tudo aqui, mas, tá dando erro na hora de visualizar, então nem me arrisco a salvar. Tipo, tá dizendo que o b:if tem que terminar necessariamente com > ou />, já tentei modificar tudo aqui e também não deu. O que faço?

http://velvetnleather.blogspot.com

Fabiano Roberto disse...

é bem dificil achar erros nos códigos as vezes uma letra faltando não deixa o código inteiro funcionar.

tente verificar se não apagou nada por engano

Brunolind disse...

Fabiano, eu criei um blog para minha tribo num jogo chamado 'Transformice' e eu coloquei este código, só que eu queria saber se tem como colocar "uma descrição do autor" ao lado da foto.

http://italotadeuecia.blogspot.com.br/

Me responda por um dos comentários do blog.

Fabiano Roberto disse...

Brunolind sim, pode colocar a descrição.

depois que fechar o código da imagem '/> pode escrever o que desejar, neste trecho:

er:0px;'/>
descrição do autor
</b:if

Anônimo disse...

olá Fabiano, eu queria saber como eu mudo o meu nome do perfil do blogger?

Fabiano Roberto disse...

entre no painel do blog, veja que no canto direito tem sua foto do lado tem uma setinha, ela abre um menu que permite editar o perfil

Anônimo disse...

consegui achar, valeu

José Luiz disse...

Não tem como colocar o nome do autor ao lado da imagem?

Fabiano Roberto disse...

José Luiz
pode colocar neste trecho

<a href="link da pagina"><img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>nome do autor</a>

José Luiz disse...

Velocidade de resposta! Kkkkkk! Valeu mesmo kra! Seu site é espetacularmente.... espetacular! Kkkkkkkkk!

Fabiano Roberto disse...

foi apenas coincidência

José Luiz disse...

Kkkkkkkkk! Mto bom mesmo o site! Agora que voltei pro blogspot, seu site está ainda melhor!

aboutsr disse...

Eu simplesmente amo tudo isso , vocês são perfeitos parabéns , tentei mtas vezes colocar assinaturas nos 3 autores do meu blog , mais não consegui , nenhum outro blog explica tão perfeitamente como vocês .

Renan disse...

Vou fazer perguntas bem boçais, mas lá vai:
"Quando já tiver a imagem pronta e hospedada entre na pagina editar HTML do seu blog e clique para expandir o modelo"

Não encontrei editar HTML e nem Expandir modelo em lugar nenhum do meu blogger.

Socorro

Fabiano Roberto disse...

na pagina modelo você encontra o botão editar html, veja nesta imagem

http://2.bp.blogspot.com/--fVFrCnrR2Y/UBc4oXQDplI/AAAAAAAABxk/PMoOT8YNpj4/s1600/editar-html-dinamica-blogger.jpg

Dricéa disse...

olá obrigada mais uma vez

Postar um comentário

Dicas e Tutoriais Úteis para Blogueiros

Gostou? Compartilhe!