5/12/2009

Modificar o local do nome do autor

Se você quer modificar a área "Postado por seu nome" é algo muito fácil. Podemos adicionar uma imagem com o nome ou uma pequena foto. Observe aqui no Acolhedor, que eu adicionei uma Imagem com meu nome, quando clicada o leitor é redirecionado até o meu perfil no Blogger.

Para adicionar essa imagem e customizar essa área, siga os passos abaixo e entenda melhor esse local, que chamamos de "Post Footer".

Antes de começar, aconselho a todos que baixem o modelo do blog e utilize em um blog de testes. É importante você testar antes de implementar em seu blog (pode acontecer de não sair como você espera) ou você deletar o código errado.

Escolha a opção Layout > Editar HTML > Expandir modelos de widgets. Procure pelo código abaixo:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>


Separei as partes do código com cores para uma melhor interpretação. A parte em verde é responsável pela linha "POSTADO POR". Já a parte em azul, é responsável pelo nome do autor, no meu caso "SILVIO" como podemos ver na imagem abaixo:


Vamos trabalhar agora com um código já modificado por mim. Troque o código anterior por esse modificando e não se esqueça de alterar as partes em destaque:

<div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <a href='http://www.blogger.com/profile/08990346677430264351'><img src='http://img16.imageshack.us/img16/347/silviopequeno.png'/></a> </b:if> </span>

* Vermelho: Link onde o leitor vai ser redirecionado quando clicar na imagem.
* Amarelo: Imagem que vai substituir nome do autor.


Resultado final:


Notais finais:
Você poderá fazer novas modificações utilizando esse tutorial. Observe o tamanho da imagem que você vai adicionar, se for muito grande vai ficar feio. No link, recomendo que utilize um que aponte para algum perfil seu pois grande parte dos leitores que ali clicarem, estarão interessados em conhecer você melhor.

4 comentários:

DicaDeDica 12 de maio de 2009 16:47  

Muito legal parabéns pela Dica, to aceitando dicas em troca de links na postagem da dica para o seu blog, é um tipo novo de parceria, se te interessa passa lá e comenta, vlw

www.dicadedica.com

planetadablogueira 12 de maio de 2009 17:26  

Já estou por aqui!! E sigo seu blog.
Sucesso!!!!

14 de maio de 2009 08:40  

Que show..adorei!!
Vou fazer em meu blog, tomara que eu consiga pq sou meio leiga nesses negocios de mexer em codigos e tal, mas vou tentar!!
Um abraço
Regina

bahiacontece 14 de maio de 2009 09:15  

Excelente dica.
Estou agora aprimorando e adquirindo novos conhecimentos a parttir de seu blog.

Abraço

Postar um comentário

Leia as regras:
- Palavras ofensivas serão removidas.
- Não coloque links no comentário para divulgar seu blog ou site, basta utilizar o OpenID na hora de enviar o comentário e seu link ficará gravado.
- Antes de fazer uma pergunta veja se ela já não foi respondida.
- Perguntas não referente ao assunto envie em contato.
- Os comentários não refletem a opinião do autor.
- Seu comentário precisa ter relação com o assunto do post.
- Agradeço a colaboração :)

  ©Template by Dicas Blogger.