quarta-feira, 23 de fevereiro de 2011

Adicionando Avatar Pessoal ao lado do Título do Post

Bom, Criei esse artigo no meu Site Oficial e hoje venho traze-lo para os Leitores do Códigos Blogger. Ele é Muito Útil para Blogs que contém multiplos autores e se cansou do comum e simples nome abaixo do título da Postagem. Então vamos lá....
  • Edite a imagem que deseja utilizar. Deixe-a nas proporções adequadas e a hospede, por exemplo, no ImageShack;
  • Abra o painel do Blogger e clique em Layout — HTML;
  • Marque a opção Expandir modelos de widgets;
  • Procure a linha <b:if cond='data:post.title'>;
  • Acima dela, digite, após substituir as partes em negrito pelos valores correspondentes a sua figura:<img src="endereço da imagem" width="largura" height="altura" alt="Avatar" style="float:left;margin:0 5px 5px 0" />
Salve o código e abra qualquer texto seu. Verá sua representação gráfica em todo o esplendor.8-D

Imagens diferentes para cada autor

Se você tiver um blog com mais autores, poderá adicionar um avatar diferente para um. Assim, os leitores identificarão rapidamente quem escreveu cada post.;) Basta adicionar um código extra por volta da imagem, como neste exemplo, que mostra uma figura específica para as publicações de João":
<b:if cond='data:post.author == "João"'><img src='http://www.example.net/joao.gif' height='50' width='60' alt='Avatar'/></b:if>

Marcadores: , ,

4 Comentários:

Às 27 de fevereiro de 2011 17:42 , Blogger Shuya Goenji disse...

Ke merda eu coloco e fica 2 avatares um do lado do otro aff --'

 
Às 23 de outubro de 2011 10:40 , Blogger Mega Andre disse...

cara consegue me ajudar? a imagem está ficando em cima do titulo da postagem e nao ao lado

 
Às 24 de outubro de 2011 00:20 , Blogger Códigos Blogger disse...

Mega Andre, adicione style="float:left;margin:0 5px 5px 0" Depois de alt='Avatar'

 
Às 6 de janeiro de 2012 18:21 , Blogger Sasuke Uchiha - Desing disse...

nao funcionou no meu , alias piorou tudo --'

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial