Substituindo os títulos da sidebar por imagens em blogs do Blogger

Vocês já viram diversas formas de personalizar seu layout, mas desta vez, nós vamos experimentar algo diferente. Sim, diferente! Hoje nós iremos aprender à trocar o nome de seu sidebar por uma imagem.

1. Você deverá criar uma imagem do mesmo tamanho de sua sidebar e de preferência utilize o formato PNG.

Ex.:

.sidebar-wrapper {width: 240px;

Sua imagem deve ter 240 de largura(veja a parte destacada de vermelho).

2. Logo após de criar sua imagem, hospede-a em um site de hospedagem. Se preferir, consulte este post.

3. Clique na guia Modelo e clique no botão Editar HTML. Logo depois pressione os botão Ctrl+F para abrir o Localizador de seu navegador e procure por: 

]]></b:skin>

4. Imediatamente, acima desta tag, cole o seguinte código:

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

Clique em Visualizar, se estiver tudo correto, volte e clique em Salvar.

5. Ainda na caixa Editar HTML, marque a caixa "Expandir Modelos de Widgets" e pressione Crtl+F e procure pelo titulo do widget que você quer colocar a imagem. Vou exemplificar, para tornar mais fácil de entender. Digamos que eu queira substituir o texto do titulo "Twitter" por uma imagem, para isso, eu preciso incluir essa imagem no corpo do código referente ao gadget "twitter".Então eu devo procurar pelo código cujo o titulo seja "twitter": 

<b:widget id='HTML13' locked='false' title='Twitter' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<data:title/></h2>

<h2 class='title'
>

/b:if>

<<div class='widget-content'>

<data:content/>

</div>

O código em negrito e em vermelho, refere-se a parte do título que aparece na sidebar.

No código citado acima, deverei substituir a tag destacada de azul pelo seguinte código:

<img src="ENDEREÇO-DA-IMAGEM"/> 

Substitua a nome destacado de azul no código acima pelo link de sua imagem. Ao terminar, clique em Visualizar e se estiver tudo correto, clique no botão Salvar.

Muito simples, não é? Mas se em você resta dúvidas, exemplifique-a em um comentário.