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.
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:
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.
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.
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 == "AUTOR1"'>
<img src='ENDEREÇO-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == "AUTOR2"'>
<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.
Marcadores: Configurações Avançadas, Html, Imagens