Colocar imagem ao lado do titulo do post

Esse tutorial é interessante para aqueles que desejam colocar uma imagem (avatar) ao lado do título do post, para uma fácil identificação do autor, e deixando um resultado estético e funcional de alta qualidade com aquele aspecto mais profissional no seu layout.

Veja na imagem acima um exemplo.

Mãos à obra.

1° passo:Vá em 'Editar HTML'do seu blog, marque a caixa 'Expandir modelos de widgets'e procure o seguinte código:

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

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

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'>

<data:post.title/></a>

<b:else/>

2º passo:Logo abaixo da linha destacada em azul, adicione essas linhas e salve:

<b:if cond='data:post.author == "AUTOR1"'>

<span class="author"><img src="IMAGEM1_URL"/>

</span></b:if><b:if cond='data:post.author == "AUTOR2"'>

<span class="author"><img src="IMAGEM2_URL"/></span>

</b:if>

Atenção:Você pode adicionar mais tags se o blog tiver mais de 2 autores.
O nome do usuário (AUTOR1 ou AUTOR2) que você inserir, deverá ser idêntico ao que está no perfil do Blogger para que a imagem funcione.
O ideal é uma imagem com as dimensões 30x30 ou 50x50 pixels.

3º passo:Agora procure a linha ]]></b:skin> e adicione acima dela esse código e salve:

.author img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}

A tag float bem como a border podem ser mudadas dependendo do local onde pretende que a imagem seja mostrada.

Para esse esquema está pronto.

Agora, se talvez esse código não tenha dado certo pra você, ou talvez queira apenas colocar uma pequena imagem ao lado do título do post, tem outra maneira mais fácil.

Veja:

1. Faça o logon no seu blog, entre novamente em "Editar HTML" e marque a opção "Expandir modelos de widgets "

2. Procure novamente a linha <b:includable id='post' var='post'>

3. Desça até a linha <a expr:href='data:post.url'> <data:post.title/ a> e entre os dois >< cole o código abaixo, lembrando que a sua imagem já deve estar criada e disponível em algum site de hospedagem. O código da imagem: <img src="URL da imagem" style="border-width:0px" />

4. Deve ficar como está na imagem abaixo:

Depois clique em visualizar e o resultado deve ser o mesmo que o título desse post (veja a bandeirinha do Brasil). Se gostou do resultado é só salvar o modelo e pronto.

---

Bookmark este post: