Mostrar Imagem Diferente para Cada Autor da Postagem no Blogger
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.
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:
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
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).
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.
Se der certo comenta!
0 Comentários