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 != ""'>
<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!
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!
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???
Cariina
Dá uma lida no meu comentário de nº 11, pode ser que te ajude.
ain já tentei de tudo mas a imagem continua alinhada à direita…. o que devo fazer ???
Clau, eu já olhei mil veses o código, e não acho
]]>
Onde ele fica?
Chico
Dá uma lida no meu comentário de nº 16, pode ser que te ajude.
quando troco o titulo pela imagem. a imagem a baixo cobre a imagem que eu botei. como resolvo esse erro?
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
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?
eu estava procurando este tutorial a muito tempo valeu.
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 ^^
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;
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
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.
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
Oi, Clau
Excelente tutorial! Assim que der vou testar. Não estou gostando dos títulos na minha sidebar.
Bjs
Ficou o bixo! obrigado pela dica!
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!
@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.
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?
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.
@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
Não consigo, pois a imagem não aparece, aparece uma cruz o que faço?
@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.
meu e-mail é: felipe.araujo_100@hotmail.com
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.
clau cliquei no link e abriu os banner e agora que eu faço ponho esse libnk aond e ecomo
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::.
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 😉