Trocar títulos da sidebar do Blogger por imagens

Neste tutorial muito interessante vamos ensinar você a colocar uma imagem como (ou no lugar) título dos widgets ou elementos da sidebar de seu blog. Um recurso muito fácil de ser aplicado e que pode dar realmente uma nova cara ao seu blog. Você poderá criar imagens usando o Photoshop, baixar e editar imagens prontas ou usar algum serviço online (recomendamos o http://cooltext.com) para usar aqui como títulos de seus widgets. Vejm como é:

Vamos presumir aqui que você já sabe como criar widgets e que já os tenha em seu blog, podem ser mesmo os elementos de página como "Seguidores", "Perfil", "Marcadores", etc.

Para começar, no Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

Agora localize o seguinte:

]]></b:skin> 

Então cole o próximo código acima/antes do anterior:

.widget .title img{
display: block;
text-align: center;
} 

Aperte Ctrl+F e procure o título do widget que você deseja modificar o título. Encontrado o Widget, ele terá uma estrutura parecida com essa:

<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
[…] 

Agora o mais importante: Apague isto:

<data:title/>

Substituindo por:

<img src="http://A_URL_DE_SUA_IMAGEM"/>

Lembrando-se evidentemente de substituir o escrito em AZUL pela url de sua imagem. Agora é só salvar e ver o resultado. Se querem um exemplo de como fica vejam abaixo a imagem que usamos aqui como título para nosso widget de posts relacionados. Seu widget agora tem uma imagem como título!!

Observações importantes:

1 - Para fazer o mesmo com os outros widgets é só ir editando um por um.

2 - Cada widget tem um título então usaremos imagens diferentes para cada um pois elas irão conter o título escrito nelas préviamente.