Substituir Titulos da Sidebar por Imagens

Vocês já viram que existem várias maneiras de personalizar seu layout e deixa-lo com o seu estilo.
Para quem ainda não viu, visite o menu Tutoriais Blogger. Lá você vai ver os indice de posts com diversas dicas de personalização para o seu blog.
Você já viu que pode personalizar a sua coluna sidebar,colocando imagens nas colunas onde ficam os widgets, links etc.

Vou ensinar como personalizar ainda mais a sidebar no seu blog, deixando-a com um estilo mais profissional e exclusivo.

Por padrão, no blogger, os titulos da sidebar se apresentam em forma de textos, mas neste post você vai aprender a substituir os titulos (textos) da sidebar por uma imagem personalizada, onde , no local dos seus titulos escolhidos para cada widget ficarão uma imagem e não mais um texto.

A primeira coisa:para trocar o texto por uma imagem, é necessário que você já tenha seus widgets instalados na sidebar,pois esta personalização requer que você altere parte do código referente a cada widget.

Então vamos lá…

1º passo: Crie uma imagem com o nome do titulo com a mesma largura de sidebar-wrapper
Por exemplo, se em:
.sidebar-wrapper {
width: 240px;
sua imagem deve ter 240 de largura.

Após criada a imagem, hospede-a no seu site de sua preferência, ou se preferir, veja onde hospedar imagens.

Agora entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole ANTES dela o código a seguir:

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

Salve!

Agora volte na edição HTML, mantendo marcada a caixinha “expandir Modelos de Widgtes” e procure pelo titulo do widget que você quer colocar a imagem.

Vou exemplificar, para tornar o entendimento mais fácil.

Na minha coluna existe um campo que dei o titulo de “Orkut”. Digamos que eu queira substituir o texto do Titulo “Orkut” por uma imagem de um botão:

Para isso, eu preciso incluir essa imagem no corpo do código referente ao widget “orkut”.
Então eu devo procurar pelo código cujo o titulo seja “orkut”:

<b:widget id='HTML13' locked='false' title='Orkut' type='HTML'>
<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>
 <div class='widget-content'>
 <data:content/>
 </div>

E no código acima, eu devo SUBSTITUIR :
<data:title/>

por este código a seguir:

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

Veja como ficou:
Confira o demo neste blog de teste.

Viu como é fácil?
Agora para cada titulo da sidebar que eu queira substituir, basta procurar o código referente ao widget e repetir o procedimento explicado acima.

Dica 1:Dependendo da imagem que você for utilizar, se você estabeleceu bordas nos titulos da sidebar, eu aconselho que você as retire, basta procurar a linha referente a “border” em .sidebar h2 {

Atenção: Para quem tem o widget de “Seguidores”, e quiser substituir o titulo deste widget por uma imagem também, a primeira coisa a se fazer é seguir o tutorial Personalizar o Gadget de Seguidores, para depois aplicar o tutorial para substituir o título dos widgets da Sidebar por Imagens.

Bom , é isso!