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

Compartilhar:
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.
► Postagens Relacionadas:

Seja o primeiro a comentar!

Postar um comentário