Como Personalizar e Colocar Imagem no Titulo dos Gadgets do Blog

Você pode personalizar os títulos dos gadgets do blogger colocando imagens de fundo, mudando as cores e formatação do texto do titulo do gadget. Essa é uma mudança simples no código HTML do seu blog e permitirá personalizar cada um dos gadgets do seu blog da maneira que desejar.

Como Personalizar e Colocar imagem no titulo do gadget do blog

Na maioria dos templates do Blogger o titulo dos gadgets da sidebar usam o estilo h2. Então entre na pagina editar HTML e procure por h2 {...} o conteúdo das chaves varia conforme o template por isso não temos como mostrar igual está no seu blog. Não apague o que já existe neste código apenas adicione o trecho abaixo, deixando deste jeito:

h2 {background-color: #6699FF;
background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}

A linha background-color: #6699FF; é uma cor de fundo caso você use uma imagem pequena ou queira apenas trocar a cor de fundo do titulo do gadget, mas você pode apagar essa linha se não quiser usar uma cor.

O restante do código é o posicionamento e a imagem de fundo. Tenha cuidado para não apagar nada por engano e também usar o endereço correto da imagem porque qualquer detalhe errado o código não vai funcionar. Veja aqui alguns links úteis sobre isso:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Hospedar Imagens no Blogger - Hospedagem Grátis
Imagem não aparece no Blog ou Site

Usando o código desta forma todos os títulos de gadgets ficarão com a mesma imagem de fundo, mas você pode personalizar cada gadget separadamente, por exemplo, se quiser colocar uma imagem no titulo do gadget dos marcadores do blog então não altere o estilo h2, mas crie um novo logo abaixo dele com o nome #Label1 h2, desta forma:

#Label1 h2 {background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}

E personalize como quiser da mesma maneira que mostramos acima. Isso vale para qualquer outro gadget, por exemplo, o nome do estilo do gadget de postagens populares é #PopularPosts1. Para descobrir o nome de outros gadgets veja nosso tutorial sobre Personalizar gadgets do Blog você poderá ver de maneira fácil como achar os nomes dos estilos dos gadgets.

Como nem todos os templates são iguais veja também nosso tutorial sobre como encontrar trechos do HTML assim poderá descobrir qual é o estilo CSS do titulo dos gadgets do seu blog.

Aproveite para ver outras dicas sobre personalizar gadgets do blogger:
Gadgets do Blogger com Links Lado a Lado (Estilo Menu Horizontal)
Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas

Se quiser também é possivel colocar Imagem no título da postagem.

Você pode usar esse mesmo procedimento para formatar o texto dos titulos como desejar apenas tenha cuidado porque essas alterações são fáceis de fazer e como falamos só é necessário prestar atenção nos detalhes porque muitas vezes apagamos uma letra do código e por isso não funciona. Esperamos que gostem desta dica e deixem sua opinião sobre qualquer assunto relacionado com blogs.

41 comentários :

  1. Muito agradecido pela dica. Mas eu gostaria de saber se existe um modo de também colocar imagens diferentes nos títulos das postagens de acordo com as tags (no link que você sugeriu é mostrado como mudar a imagem dos títulos, porém de forma padrão para todos). Exemplo, em uma tag "vídeos" o título automaticamente apresentará uma imagem de fundo correspondente a ela. Já vi isso em alguns blogs e sites, mas não soube como aplicar essa opção efetivamente.

    Agradeço por este post e por uma possível resposta =)

    ResponderExcluir
  2. Miguel não tem como colocar imagens diferentes nos títulos das postagens porque todas são o mesmo estilo (CSS).

    só é possivel no titulo dos gadgets por causa dos nomes dos estilos de cada gadget:

    Label1, PopularPosts1 e outros nomes.

    ResponderExcluir
  3. Olá fabiano, eu posso fazer isso no título do gadjet: "Marcadores"?

    ResponderExcluir
  4. para fazer isso nos marcadores é com o estilo

    #Label1{....}

    ResponderExcluir
  5. Queria saber como colocar a imagem inclicavel tipo: o titulo ta assim "Jogos" e em baixo as páginas.

    ResponderExcluir
  6. acho que não tem como colocar essa imagem clicavel ao lado do titulo.

    alias teria como colocar mas apareceria igual em todos os posts e com o mesmo link

    ResponderExcluir
  7. Olá fabiano, tenho um blog com um template mas n tem o titulo como coloca? pf td resumido pq eu sou um ameba .-.

    ResponderExcluir
  8. Ana Beatriz veja o nome dos estilos, por exemplo o h2 tem que ser exatamente igual.

    ResponderExcluir
  9. comigo também infelizmente não deu certo...

    ResponderExcluir
  10. Olá no meu blog tem o seguinte código para titulo do gadget:





    Onde eu coloco o código para funcionar.
    Obrigada.
    vanessafatima_ribeiro@hotmail.com

    ResponderExcluir
  11. pode ser em diversas partes do html.

    procure por ]]></b:skin> e coloque os estilos CSS antes dele

    ResponderExcluir
  12. Olá Fabiano, não consigo achar o h2 {...} no HTML do meu blogger! D:

    http://popgleek.blogspot.com.br/

    ResponderExcluir
  13. se não achar você pode adicionar esse trecho

    ResponderExcluir
  14. No meu tem mais de 5 h2{...} como saber o certo?

    ResponderExcluir
  15. Consegui! E se eu quiser colocar a imagem no fundo do widget e não no título?

    ResponderExcluir
  16. Juan Marx para deixar a imagem sobre o gadget só precisa retirar o h2 e deixar o #Label1 {.... por exemplo

    mas isso vai deixar a imagem de fundo no gadget todo inclusive o titulo.

    ResponderExcluir
  17. desisto de ser blogueiro!!!!!!!1 nunca consigo modificar isso aaaaaaaaaaaaaaaaaaaaaaa chega... só volto se conseguir -1 blogueiro no mundo

    ResponderExcluir
  18. murilo no começo é difícil mesmo.. mas aos poucos vai pegando o jeito

    ResponderExcluir
  19. Oi me ajuda em uma coisa
    Esse é o meu blog http://conversasdealcova.blogspot.com.br/

    No template que eu baixei tinha uma imagem antes do titulo, só que depois que eu apliquei a tal imagem não entrou. Eu gostaria de um código pra inserir a umagem antes do título. Me ajuda :)

    A imagem é essa : http://static.tumblr.com/k0k9z8j/nGgmh1q9l/cereja.jpg

    ResponderExcluir
  20. Kris você precisa fazer uma imagem no tamanho certo porque esse código de imagem de fundo não reduz a imagem

    ResponderExcluir
  21. Eu consegui o que eu queria, pedi pra um amigo fazer um banner e resolveu meu problema :) (y)

    Minha dúvida agora era porque aquelas miniaturas de postagem ficam com uns codigos escritos ao invés de ser o que está na postagem?

    Pesquisei aqui, já e não achei nada explicando.

    ResponderExcluir
  22. Tá assim ó:Aparece a miniatura da imagem postada e ao lado dela o trecho da postagem, mas em algumas antes do texto tem esse código:

    Normal 0 21 false false false PT-BR X-NONE X-NONE MicrosoftInternetExplorer4 Na boca guardo o gosto do seus passos, te sinto e me envolvo, no calor...

    ResponderExcluir
  23. se apareceu o código em vez do titulo da postagem é porque colocou algo errado.

    pode ser qualquer detalhe no html como por exemplo faltar algum sinal, usar " em vez de '

    ResponderExcluir
  24. Mas não é em toda postagem, é só em algumas, como é que eu detecto esse erro?

    O código não apareceu ao invés do titulo, não. Ele apareceu antes do texto da miniatura da postagem. Entra lá no meu blog que vc vendo é mais fácil do que eu explicando, Por favoooorrrrr >.<

    ResponderExcluir
  25. Fabiano, eu preciso muito da sua ajuda. Eu tenho 24 anos e possuo um sonho de fazer um blogger de artesanato, bonito e criativo. . . Mas eu to fazendo tudo errado, nao entendo nada, nao consigo editar e nem personalizar. me ajude por favor. . . . . . rosanafeydit@hotmail.com

    ResponderExcluir
  26. Rosana personalizar o blog leva tempo... por isso tente fazer as coisas aos poucos e tenha paciencia... (principalmente no começo)

    o que você queria mudar no seu blog?

    ResponderExcluir
  27. oi Fabiano, queriacolocar uma barra de fundo nos nomes dos gadgets no meublog www.castelodoterror.blogspot.com da cor domenu. so qprocurei esse h2 naoachei, achoqo blog nao ta permetindomaisouso do f3.. como faço??? teria como vc me ajudar?

    ResponderExcluir
  28. para achar códigos use o ctrl F, veja aqui:
    Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F


    em alguns templates é o estilo h3

    ResponderExcluir
  29. Fabiano meu filho, preciso de ti em mais essa:
    Clique e passe o mouse nos links e me oriente porque isso está acontecendo.
    Por favor! http://nataliavideo.blogspot.com.br/2013/06/chamando-deus-de-pai.html

    ResponderExcluir
  30. Natália o problema é que você colocou o CSS do menu varias vezes no seu blog.

    veja como o trecho #page-bar li a:hover {....

    você colocou esse código dentro de cada gadget e por isso gera erro, tem que usar cada nome uma vez só. Teria que trocar o nome page-bar para cada vez que usou esse código por exemplo no gadget românticos usar o estilo

    #romanticos li a:hover{....

    e no inicio do menu colocar
    <ul id="romanticos".....

    se quiser usar o mesmo efeito em todos os gadget coloque o css no html do blog e no menu só os links.

    ResponderExcluir
  31. O CCS #page-bar já existe no html
    E como colocar só os links nos gadgets?

    ResponderExcluir
  32. Natália

    você poderia usar outro nome, por exemplo #page-bar2

    ResponderExcluir
  33. Usar #page-bar2, mas como?
    Em cada gadget?

    ResponderExcluir
  34. se for utilizar em gadget pode formatar o gadget como mostramos no tutorial, encontrando a id do gadget como no exemplo é Label1 e fazer a formatação para cada gadget, por exemplo #HTML 4 a {.....}

    ResponderExcluir
  35. Fabiano, você sabe como posso deixar os títulos dos Gadgets desta forma: (http://i.imgur.com/3fRleoC.png) ?

    []'s

    ResponderExcluir
  36. normalmente o código do estilo do titulo dos gadgets é h2.

    mas precisa entender um pouco de css para ajustar deste jeito que falou pois necessita fazer testes diretamente no seu template.
    O que é CSS? Para que Serve e Como usar o CSS

    ResponderExcluir
    Respostas
    1. Fabiano, no que se refere aos menus, é possível inserir pequenas imagens ao lado dos nomes linkados?
      Vide exemplo: (http://i.imgur.com/S0FMck9.png)
      []'s

      Excluir
    2. é possivel, mas vai dar um pouco de trabalho porque no seu exemplo são imagens diferentes para cada link.

      use este código para cada imagem ao lado do texto:

      < a href='url do link' >< img src='url da imagem' style='float:left;padding: 5px' >texto do menu< /a >

      isso faz a imagem ficar ao lado de cada item, mas precisa ajustar o valor padding: 5px para posicionar a imagem

      ou se achar mais facil em vez de usar texto e imagem use somente a imagem escrevendo o texto de cada item do menu junto com sua imagem. Então desta forma é o código da imagem normal como colocaria em qualquer parte do blog.

      o problema de usar uma imagem é que não tem efeito ao passar o mouse, por exemplo, no texto e imagem ao passar o mouse o texto pode mudar de cor.

      Excluir