avatar do autor ao lado da postagem

Oi! Eu falei que voltava logo e cá estou eu, finalmente de volta e muito feliz. ♡ Eu finalmente contratei uma internet decente e estou conseguindo me organizar com a rotina da faculdade. Ouvi um amém? Eu sei que prometi postar em todos os sábados, mas eu estava tão cansada que resolvi adiar o post por um diazinho. Espero que não se importem. Estou trabalhando nisto, estudando e ainda colocando as séries em dia, se isso não é ser um exemplo de pessoa, eu não sei o que é. Falando em séries, têm alguma para me indicar? Estou na terceira e, até então, última [cries in norwegian] temporada de SKAM e gente, que série amor. Ah! Também terminei recentemente The OA, que não tem nada a ver com o tema da anterior, mas é uma das coisas mais geniais que eu já vi na vida. Recomendo muito. Enfim, hoje atendo a um pedido de leitor de como colocar o avatar do autor ao lado da área de postagem. Eu estava com muita saudade de trazer tutoriais para cá. Espero que ajude a todos com a mesma dúvida e que gostem. Enjoy.

☆ preview:

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por </head> e dê enter. Depois de ter encontrado, cole acima/antes 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> 

Em seguida, procure por <b:if cond='data:post.title'>. Haverão dois resultados para esta tag e nós usaremos o segundo. Assim que encontrar, cole o seguinte código acima/antes dele:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/> 

 Por fim, para personalizar, busque por ]]></b:skin> e acima/antes disto cole o código a seguir:

.avatar-author {
background: #fff;
padding: 1px;
border: 3px solid #515050; /* cor da borda */
margin-right: -40px; /* mude para ajustar */
float: right; /* mude para right ou left */
width: 25px; /* largura do avatar */
height: 25px; /* altura do avatar */
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
}
.avatar-author:hover {
border-radius: 25px;
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-webkit-transform: rotate(360deg);
}

Visualize para ver se está tudo certinho e salve. É bem simples e o resultado fica super fofinho, perfeito para blogs que tenham mais de um autor. Qualquer dúvida, podem comentar e não esqueçam os créditos. Por enquanto vou ficando por aqui, mas logo volto para atender mais pedidos ou postagens aleatórias. Até lá, se cuidem e fiquem bem.