Flawless HTML: Como colocar imagem na frente do nome do autor da postagem

Esse tutorial é muito útil pra gente que compartilha o blog (tem mais de 1 pessoa postando no mesmo blog).

Que nem eu no meu blog de Fanfic pro Justin Bieber (não sou poser tá, falo assim porque tem gente aqui que não é belieber), em que eu e mais 2 amigas postamos.

Teve uma época em que umas leitoras do blog estavam fazendo confusão na hora de ver quem postava o que, pra solucionar isso eu procurei bastante e achei esse tutorial maravilhoso no Dicas Para Blogs.

Eu irei adaptá-lo pra cá, como eu faço com todos os tutoriais que são postados aqui.

Pra vocês que ainda não entenderam esse é o resultado do que acontece depois de aplicar esse tuto ao seu blog:

Let's go to the tuto now!

Primeiro você deve abrir modelo>editar HTML.

Clique em "expandir o modelo", agora pressione CTRL+F e pesquise por <div class='post-footer'>, se não achar assim procure algo similar.

Abaixo do código que anteriormente mandei procurarem colem:

<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>

Substituam "AUTOR1"/ "AUTOR2" pelo nome do seu perfil no blogger (exatamente como está se não o código não funciona) e "ENDEREÇO-DA-IMAGEM-AUTOR"/"ENDEREÇO-DA-IMAGEM2" pelo URL da imagem desejada.

Se seu blog tiver mais de 2 autores, é só repetir o código o numero de vezes desejado, apenas não esquecendo de por o nome do perfil do blog exatamente como está.

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 assim:
<a href="link da pagina"><img src='ENDEREÇO-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/></a>

Se quiserem selecionei alguns gifs de comidinha para colocarem como imagem do autor: