ZMedia Purwodadi

Mostrar Avatar do Autor ao Lado do Título da Postagem

Índice
Acredito que você já deve ter observado em alguns blogs que a foto do autor aparece ao lado titulo das postagens, como aqui no Guia Blogger. O avatar ao lado do titulo das postagens ajuda as pessoas a identificar facilmente o escritor do post. Além disso, se você tiver vários colaboradores no seu blog, ele vai ajudar os leitores distinguir os diferentes escritores.
 
Veja o exemplo:
Mostrar avatar do autor ao lado do título da postagem
Saiba que, adicionar seu avatar ao lado dos títulos das postagens dá um toque mais pessoal ao seu blog. Indica que um ser humano real está trabalhando por trás do blog.
 
Então, vamos adicionar este belo complemento para seu blog Blogger e tornar a coisa ainda mais sucinta.

E, claro, o avatar é totalmente automatizado.

A grande questão é: Como mostrar o avatar do autor ao lado do titulo das postagens?

São apenas três passos simples.
 
Primeiro passo:  Acesse o menu “modelo >> Editar HTML >>  e procure por: ]]></b:skin>

Adicione o código abaixo antes de:  ]]></b:skin>
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}
Segundo passo:  Encontre o seguinte código: </head>

Adicione antes do código encontrado o seguinte código:
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
Terceiro passo: Procure pelo seguinte código:  <b:if cond='data:post.title'>

Antes do código acima cole o seguinte código:
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
Clique em salvar modelo e está feito.