Imagem ao lado título do post

Olá Designers ! Tudo bem ?

Um sistema muito bom,é colocar a foto do autor ao lado do post,substituindo a apresentação dele etc...
O bom do sistema,é que a foto pode ser personalizada com vários tipos de imagem !

Vamos começar !

Criando a Imagem

1. Abra o seu programa de edição de imagens,eu por preferencia,utilizarei o Fireworks CS6 !

2. Crie um novo documento do tamanho de sua preferencia,o meu será 100x100 pixels.

3. Crie uma base para a sua imagem,pode ser um quadrado,circulo,fica a sua preferencia.
Coloque um fundo,ou pinte de alguma cor mesmo.

4. Agora coloque algum penguin,ou algum texto para personalizar a sua imagem,edite a seu gosto.

Editando o HTML

1. Vá em Modelo, selecione Editar HTML e marque a caixinha Expandir Modelos de Widget .

2. De CTRL+F e procure pelo seguinte trecho:

<b:if cond='data:post.title'>;

3. Quando achar,cole o seguinte código ACIMA do trecho que você procurou fazendo as suas alterações:

<b:if cond='data:post.author == "NOME"'><img src='URL DA IMAGEM' height='50' width='60' alt='DESCRIÇÃO DA IMAGEM'/></b:if>

NOME - Coloque aqui o seu nome de perfil no blogger. Se você tiver mais de um autor,adicione esse código duas veze,um com o seu nome para as Suas postagens, e o outro para as postagens do outro autor.
(cada autor deverá ter um código)
URL DA IMAGEM - Coloque aqui o link da sua imagem.
LARGURA - Coloque aqui o tamanho da largura da imagem.
DESCRIÇÃO DA IMG - Coloque o texto que irá aparecer ao passar o mouse por cima. (se não quiser texto,apenas apague)

Depois disso salve.

A imagem ficará ao lado do título,você pode alterar o lugar dela pesquisando no seu código e trocando o lugar do segundo código.

Se ficou alguma dúvida deixe nos comentários !