Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Sidebar Vanessa S.

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.

[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]

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!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

29 Comentários

  1. Raffael disse:

    O meu só funcionou 1 o outro não apareceu a imagem, e sim só o url, agora eu quero tirar e deixar só o texto de novo e não funciona!

  2. Clau tem algum tutorial que coloca a imagem na sidebar através do HTML parecido com esse só que ao invés de já ter o gadget no blog eu vou coolocando automaticamente, tipo, coloco o código no html e dai qnd eu qr acrescentar ou retirar um gadget com a imagem ao invés só textoeu add o gadget como eu faço normal ao invés de aparecer o texto aparece a imagem que eu coloquei no html é tipo os templates da Evelyns Place???

  3. .:: Clau ::. disse:

    Cariina
    Dá uma lida no meu comentário de nº 11, pode ser que te ajude.

  4. Cariina disse:

    ain já tentei de tudo mas a imagem continua alinhada à direita…. o que devo fazer ???

  5. Laura ? disse:

    Clau, eu já olhei mil veses o código, e não acho

    ]]>

    Onde ele fica?

  6. .:: Clau ::. disse:

    Chico
    Dá uma lida no meu comentário de nº 16, pode ser que te ajude.

  7. Chico Canavieira disse:

    quando troco o titulo pela imagem. a imagem a baixo cobre a imagem que eu botei. como resolvo esse erro?

  8. Chico Canavieira disse:

    tomara que voce esteha ai agora, consegui botar isso, só que as imagens ficam em cima dos botoes que to botando como faco pra ajitar

  9. Gon.-Sensei disse:

    Quando tento pôr uma imagem no título da sidebar, esta aparece pequeno tipo um ícone, mas na verdade ela devia aparecer no seu tamanho normal.

    O que estou a fazer mal?

  10. Andson disse:

    eu estava procurando este tutorial a muito tempo valeu.

  11. Davinho_Ever disse:

    Amei!!! Eu tinha descoberto outro jeito de deixar a imagem no lugar do topo, mas desse jeito me permite uma liberdade maior de mecher no gadget depois que já está com a imagem ^^

    Mas comigo, o que você diz no tutorial só funciona se a imagem tiver o mesmo tamanho da antiga imagem do topo dos gadgets, além de ter que tirar a imagem padrão para os topos de todos os gadgets da sidebar… como queria colocar imagens maiores no lugar dos títulos tive que alterar:
    .sidebar h2{…

    height: xxxpx;

    No lugar do xxx, coloquei a altura da minha imagem ^^

  12. Maykel disse:

    Só um pequeno Help!

    Se a imagem continuar a querer aparecer a direita, ficando um pedaço da imagem comido como "Sosvip" disse, faça o seguinte, isso vai depender do template creio eu!

    *Altera padding-left, na .sidebar h2, consegui fazendo isso! Só que altera tudo! Se for usar imagem isso não tem problema! Obrigado!

    .sidebar h2 {

    padding-left: 0px;

  13. Max Martins disse:

    Clau,

    Obrigado pela atenção.
    Estava com insônia ontem e resolvi o problema.
    Vou aprender a trabalhar com o PhotoFiltre e melhorar as imagens, mas já melhorou bastante o visual da sidebar.
    Quando tiver um tempinho, passa lá e confere o resultado.

    Abraço

  14. .:: Clau ::. disse:

    Max
    Vc pode usar o código para inserir a imagem assim tb:
    ?
    <img src="ENDEREÇO-DA-SUA-IMAGEM" style="height: XXXpx;width: XXXpx;" />
    Em height vc especifica a altura e em width, a largura.

  15. Max Martins disse:

    Clau,

    Eu consegui, mas fiquei com uma dúvida: ao criar a imagem tenho que especificar a altura também?

    Obrigado por mais essa dica.

    Abraços

  16. Max Martins disse:

    Oi, Clau

    Excelente tutorial! Assim que der vou testar. Não estou gostando dos títulos na minha sidebar.

    Bjs

  17. th3m@d0xt3r disse:

    Ficou o bixo! obrigado pela dica!

  18. sosvip disse:

    Perfeito Clau. Muito obrigado a vocês pela atenção disposta. Encontrei o "erro" no código. Estava, conforme sugerido próximo à h2, na parte de CSS.
    Vou corrigir agora.
    Obrigado mesmo! O Gothic Darkness já está entre meus favoritos. Nunca mais perderei de vista.
    Abração!!!
    E no que precisar, pode contar conosco.
    PS.: como o comentário saiu repetido (desculpe),os agradecimentos seguem em nome de Marcelo Souza e SOSVIP!

  19. ::Clau:: disse:

    @sosvip:
    @Marcelo Souza:

    No 1º Passo, no trecho do código, onde está: text-align: center;
    altere o "center", por "left" ou "right"(depende de qual posição vc quer).

    2) Outra alternativa tb é verificar como vcs estabeleceram o posicionamento do titulo da sidebar no CSS.
    Verifica em:
    .sidebar h2{
    se há posicionamento definido, por exemplo :
    text-align: center/left/right;
    se houver, tb altere colocando o posicionamento que vc quer.
    (lembrando que "center=centro", "left=esquerda", "right=direita".)

    3) Outra alternativa é incluir o posicionamento no próprio código da imagem:
    Ao invés de usar o código assim:
    <img src="ENDEREÇO-DA-IMAGEM"/>
    Use assim:
    <img align='middle' src='ENDEREÇO DA SUA IMAGEM'/>
    Onde está "middle" coloque o posicionamento que vc quer: left,center ou right.

    Testem e veja se dá certo.

  20. Marcelo Souza disse:

    Olá. Cheguei aqui por indicação da Mama…
    Clau, testei o tutorial e apareceu a imagem, no entanto ela está alinhada a direita e não ao centro, tanto que a imagem fica cortada na parte final…
    Como faço para alinhá-la ao centro ou a esquerda?

  21. sosvip disse:

    Testei e ocorreu um pequeno erro Clau. Já procurei milhares de tutoriais e nenhum funcionou. 🙁
    A imagem aparece, mas não se alinha a esquerda, mesmo existindo o comando. Ficou alinhado quando eu substitui o título dos widgets por imagens. Mas quando tento colocar UMA IMAGEM DIFERENTE POR WIDGET, ocorre o erro mencionado. É como se a imagem ficasse alinhada bem a direita, por que chega a sumir parte da imagem.
    Será que há algum meio de alinhá-la a esquerda?
    Se for possível a ajuda, desde já ficarei muitíssimo grato Clau. Se não, também entenderei, pois sei como deve ser complicado responder e ajudar a todos.
    No mais só tenho que te agradecer a ajuda dada até o momento pelo excelentes tutoriais que você posta aqui!
    Obrigado.

  22. .:: Clau ::. disse:

    @jt:
    Vc deve ter feito alguma coisa errada, pq eu uso esse hack aqui no Gothic Darkness..foi assim que substitui os titulos da sidebar por imagem. Talvez pode ser tb pelo fato q desde ontem anda rolando um bug nos titulos dos widget no blogger.
    Dá uma lida na explicação da @mamanunes sobre isso:
    Erro nos Títulos dos Gadgets do Blogger – http://goo.gl/Ky5O

  23. Jt disse:

    Não consigo, pois a imagem não aparece, aparece uma cruz o que faço?

  24. ::Clau:: disse:

    @ASH KETCHUM:
    Leia o tutorial novamente com mais atenção que nele já explica, inclusive como alterar o titulo do widget de seguidores.
    Lembre-se que para cada titulo da sidebar que vc queira substituir por uma imagem, basta procurar o código referente ao widget. No seu caso vc quer substituir slide, arquivo e fotos, procure o widget com os nomes e siga as instruções do tutorial que vc vai conseguir.

  25. ASH KETCHUM disse:

    meu e-mail é: felipe.araujo_100@hotmail.com

  26. ASH KETCHUM disse:

    Oi, como eu faço para trocar os titulos dos seguintes windgets por imagens: Arquivo do Blog, Seguidores, fotos e slides???, pq nao estou conseguindo edita-lo.

  27. SEPULCRO GOTICO disse:

    clau cliquei no link e abriu os banner e agora que eu faço ponho esse libnk aond e ecomo

  28. ::Clau:: disse:

    Digão:
    Pois é…deixar o blog com uma aparência melhor é muito bom mesmo…eu tb estou pensando em aplicar no layout aqui do Gothic Darkness…
    Bjks,
    .::Clau::.

  29. blogando20 disse:

    Olá minha querida…gostei desse tutorial usando essas regras de css nós podemos deixar o blog com uma aparência melhor mais tarde talvez eu aplico essa dica no template do meu blog, mas pra isso vou procurar uma imagem que combine com o layout do mesmo. Ah! Eu li seu comentário, viu como é fácil deixar seus parceiros sempre no topo? rsrsrs estarei no aguardo da sua próxima postagem..bjos…do Digão 😉

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.