Trocando títulos da sidebar do Blogger por imagens

Nesse meu primeiro post do mês de junho, iremos aprender a colocar imagens como título da sidebar do Blogger, como no meu blog ClickImagens.

Para isso, criarei um Widget Qualquer em um blog qualquer para que possamos começar. Vou colocar “Titulo Vagabundo” como título do Widget, para podermos identificá-lo posteriormente:

Depois de salvar o Widget, podemos vê-lo na nossa Sidebar:

E devemos também ter a imagem pronta.  Irei utilizar uma imagem ridícula de 150px x 30px:

Agora, com isso pronto, vamos ao tutorial (clique nas imagens para ampliá-las):

1 - No Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

2 - Cole isso antes do ]]></b:skin>:

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

3 - Aperte Ctrl+F e procure o título do widget, no meu caso, “Titulo Vagabundo”:

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>
[…]

4 - Apague o “<data:title/>” e substitua por:

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

Substituindo, é claro, o texto em negrito pela URL da sua imagem.

5 - Visualize para ver se está tudo certo, salve o modelo e pronto! O seu widget agora tem imagem no lugar do título. Veja como ficou a porcaria o meu:

Confesse, você achava que seria algo mais complicado, certo?