Trocando títulos da sidebar do Blogger por imagens

| 37 Comentários

Nesse meu primeiro post do mês de junho, iremos aprender a colocar imagens como título da sidebar do Blogger, como no meu blog ClickImagens.

Para isso, criarei um Widget Qualquer em um blog qualquer para que possamos começar. Vou colocar “Titulo Vagabundo” como título do Widget, para podermos identificá-lo posteriormente:

Depois de salvar o Widget, podemos vê-lo na nossa Sidebar:

E devemos também ter a imagem pronta.  Irei utilizar uma imagem ridícula de 150px x 30px:

Agora, com isso pronto, vamos ao tutorial (clique nas imagens para ampliá-las):

1 - No Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

2 - Cole isso antes do ]]></b:skin>:

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

3 - Aperte Ctrl+F e procure o título do widget, no meu caso, “Titulo Vagabundo”:

Encontrado o Widget, ele terá uma estrutura parecida com essa:

<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<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>
[…]

4 - Apague o “<data:title/>” e substitua por:

<img src="http://A_URL_DE_SUA_IMAGEM"/>

Substituindo, é claro, o texto em negrito pela URL da sua imagem.

5 - Visualize para ver se está tudo certo, salve o modelo e pronto! O seu widget agora tem imagem no lugar do título. Veja como ficou a porcaria o meu:

Confesse, você achava que seria algo mais complicado, certo?

37 comentários [Comente também!]:

blogreuniaogratis disse:

Olá,

Então é só substituir “data:title/” pelo imagem que a gente desejar?

SemNome disse:

@ReuniaoGratis, resumidamente, é.
Antes disso, você só precisa colocar o style.

[]'s
SemNome

aprendocriando disse:

Dica legal, sempre parece fácil depois que alguém ensina o caminho, obrigada.

Infelizmente não funcionou com os gadgets 'seguidores' e 'arquivos'.....

Tem como verificar?

SemNome disse:

@AprendoCriando, o widget do arquivo do blog funcionou legal aqui, enquanto o de seguidores você tem que mudar, além do 1º title, o segundo, que fica em:
<b:if cond='data:totalFollowerCount != &quot;&quot;'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>

E lembre-se de que o widget deve ter um título, senão não irá funcionar.

[]'s
SemNome

aprendocriando disse:

Tkoift,

Grata pela ajuda, vou tentar.
Aconteceu um fato desagradável. Busquei no Google pesquisa de blogs os links que direcionavam para o meu e encontrei um que continha a sua resposta mas direcionava para uma página com conteúdo para maiores. Fiquei preocupada, pois meu blog é direcionado a colegas professores e meus alunos, além de todos que desejem visitar - é claro.

disse:

Lindo, explique melhor como colocar a mesma imagem que coloquei no sidebar no seguidores pfvr!!! Tentei trocar mas não deu certo, me ajude!!! Sentiu minha falta??? Tô te seguindo.....
Bjsssssss

SemNome disse:

@Lê, como eu respondi há alguns comentários atrás, existem dois "<data:title/>" no widget de Seguirores.
Você deve substituir os dois, sendo que tem um destes acompanhado por "(<data:totalFollowerCount/>)". Tire os dois.
Qualquer dúvida, é só postar.
[]'s
SemNome

disse:

Lindo, não sei o que estou fazendo errado, todos deram certo, mas o seguidores eu substituí como vc falou e não apareceu a imagem não... sniff...

SemNome disse:

@Lê, me desculpe. Quando eu respondi a pergunta da @aprendocriando, eu havia testado e havia funcionado. Testei dessa maneira agora e percebi que não funciona mais assim.
Testei outros modos e, infelizmente, não consegui colocar a imagem no título do widget de Seguidores.
Mais sorte na próxima...
[]'s
SemNome

disse:

Tudo bem meu amor!!! Eu te gosto demais sobrinho!!! Bjsssssss

OCP disse:

@Tkoift para colocar imagem no widget Seguidores é possível mas é necessário colocar um código no CSS e colocar um ponto (.) como titulo.

Eu segui o seu tutorial para os restantes widgets mas encontrei o mesmo problema nos seguidores e esta foi a solução que encontrei e funcionou:

.Followers1 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 0px;
text-align: left;
font-size: 16px;
overflow:hidden;
height:32px;
background:#232628 url(URL_DA_IMAGEM) no-repeat;
}
.Followers1 h2 a:link, .fblock h2 a:visited{
color:#fff;
}

Claro que precisa alterar algumas configurações acima como a cor #232628 que é a que tenho no fundo dos títulos do meu blog e a height (altura).

Espero ter ajudado.

Abraço. :)

PS. A verificação de palavras dificulta comentar aqui. :(

SemNome disse:

@OCP, obrigado pela contribuição. E quanto à verificação de palavras, desativarei, já que eu deixo a moderação de comentários ativa...

[]'s
SemNome

disse:

Lindo, traduza isso aí em cima pra mim, tá... bjsssss

SemNome disse:

@Lê, o modo dele é usar apenas um background no título do widget de seguidores:

#Followers1 h2.title{
background:url(url_da_imagem) no-repeat center;
height: 20px; /*Altura da imagem em pixels*/
}

Resumidamente, é isso aí. Mas o título do widget ainda vai aparecer. Então, troque o título do widget para um ponto (.) ou um hífen (-) e deixe o css assim:

#Followers1 h2.title{
background:url(url_da_imagem) no-repeat center;
height: 20px; /*Altura da imagem em pixels*/
font-size:1px!important;
}

Eu sei, é uma gambiarra, mas funciona (ou não).

[]'s
SemNome

disse:

rsss... Amei o funciona ou não...rsss...
Amo muito tudo isso!!!
Vlw lindo,
bjsss

Anônimo disse:

E o título do blog, como mudar ?

SemNome disse:

Esse é o básico: basta ir no painel, em layout; clique em "editar" no widget "Cabeçalho", selecione uma imagem e selecione a opção que indica que somente a imagem aparecerá.

[]'s
SemNome

Heróis da net disse:

AMIGO essa postagens foi a mais importante que já vi quando se trata do blogger,pois além de deixa-lo mais profissional é excelente..
parabéns pela postagem,com certeza você deixou um blogueiro feliz..e como digo Chupa essa Wordpress.
Abçs....confere lá / www.heroisdanet.co.cc

Jamylle Carvalho disse:

Escuta, deu tudo certo quando tentei fazer isso ai. Só que depois quando fui adicionar outra widget, não deu pra mudar o titulo por imagem. Todos esses códigos ai sumiram. O que eu faço?

disse:

Lindo, fiz a experiência e o resultado não poderia SER outro: Nota Mil!!!!!!
Por essas e outras que sigo vc!!! Bjs

ॐ Flávio ॐ disse:

Oi..

Gostei muito da dica, mas infelizmente o meu codigo tá diferente..

OBS: Acrescentei "/" no codigo entre < e b:widget .. porque não dava para colocar no comentário..

CODIGO: < "/" b:widget id='HTML2' locked='false' title='Pedidos' type='HTML'/>


Eu acrescentei o "ID=Main" mas mesmo assim não funciona, porque deu erro de html mal fechado, ou algo parecido.

Que configurações precisarei fazer para colocar uma imagem em vez do titulo nas sidebars ?

Aguardo retorno..

Abraço,
Flávio

Meu Blog de Teste : http://testecineanarquia.blogspot.com/

SemNome disse:

@Flávio

Pelo que eu vi, você apenas não clicou em "Expandir modelos de widgets". Depois de clicar, logo abaixo de <b:widget id='HTML2' locked='false' title='Pedidos' type='HTML'>, irá aparecer o "b:includable". Após isso, basta seguir o tutorial (trocar o <data:title/> pelo código da imagem).

[]'s
SemNome

Kakashi Hatake disse:

como coloca imagem no titulo dos seguidores? nao to conseguindo ^^

SemNome disse:

@Kakashi, basta ler os outros comentários. Mas vou adiantar: não dá mais. Antigamente dava para mudar; atualmente, o máximo que dá para fazer é colocar um background nele.
[]'s
SemNome

W. Amanda disse:

Eu consegui, por incrível que pareça.
Basta manter o HTML do mesmo jeito, sem retirar "< data : title/ >" e "(< data : totalFollowerCount/ >)".
Adicionar isto ao CSS:

#Followers1 h2.title{
background: url(url da imagem) no-repeat center;
height: 40px; < Altura da sua imagem
font-size: 0px;
}

E pronto!
Espero ter ajudado. E muito obrigada pelo tutorial, me ajudou demais!

Anônimo disse:

Eu já seiuma dica melhor, é só Expandir modelos de widgets e apagar no html todas as partes que estiver escrito e pronto o titulo some!!

Anônimo disse:

Achei as instruções da W.Amanda mais simples, usei-as e deu tudo certo, funciona direitinho! Muito obrigada pelas dicas!

matematica-na-veia disse:

Ajudou bastante a explicação. Não era realmente o que eu procurava, mas com as explicações super claras consegui arrumar os titulos das widgets que eu queria tirar. Um abraç oe bom trabalho!

Leonardo Barcellos disse:

adorei essa postagem
era tudo o que eu queria, agora sei mudar os títulos e colocar uma foto lá
parabéns

Igão disse:

Como que faz pra deixar uma imagem de background padrão em todos, sem ter que mudar de um em um?

SemNome disse:

@Igão, isto está no CSS. Geralmente é um destes:

.sidebar h2
#sidebar h2
h2.title

Abra o HTML do seu blog e busque por h2 (use Ctrl+F). Você encontrará um desses. Então, mude o background dele para:

background:url(url-da-imagem) no-repeat left top;

[]'s
SemNome

Programa GM disse:

E quando não tem o pra substituir, como faço?
A única coisa que aparece é isso aí abaixo.

SemNome disse:

@Programa GM, a sua mensagem não saiu completa.
Tente repostar o código HTML, substituindo o < por &lt;

[]'s
SemNome

WTF Blog disse:

quando faço isso, a img não aparece. aparece apenas um quadrinho, como se a img não tivesse sido carregada. e agora ?

SemNome disse:

@WTF, se você colocar a URL correta, isso não acontecerá. Veja se você não colocou dois http:// ou coisa do gênero.

[]'s
SemNome

Rubervânio Rubinho Lima disse:

Meu caro...
Estou agradecendo pelo tutorial...

Estava procurando exatamente isso, para meu blog e fui certinho e deu beleza...
Tive o mesmo problema de todos nos seguidores, mas vou deixar quieto...

obrigado

@beeislost disse:

Pra mudar de seguidores, voce nao instala o "seguidores" onde ja vem lá na opção no blogger, voce vai no site do google friend connect (http://www.google.com/friendconnect/), faz loggin com o email que voce usa no blog e cria a caixa de seguidores lá. Daí você clica em "gerar código", pega o HTML que ele fornece, vai lá onde adiciona elementos de página no blogger e ao inves de adicionar o gadget de Seguidores, você adiciona o de HTML/Javascript, cola o codigo que o site forneceu e salva, daí é só você seguir o tutorial desse post que funciona ^^

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes