Personalizar os títulos dos gadgets

em 18 de setembro de 2013

Hoje vou partilhar com você uma dica simples e bem facinha de fazer: colocar fundo em seus títulos dos gadgets,
Assim, como eu uso atualmente (09/2013):


Para começar acesse a aba Modelo de seu blog, e a seguir clique em Editar html.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que abrir procure por isso:

h2 {

Essa é a tag que define a aparência dos títulos dos gadgets.
Caso você nunca tenha personalizado essa parte estará assim:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

Agora vou ensinar o básico para personalizar.
Veja os códigos:

Centralizando o título:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
text-align: center; 
}

Colocar uma cor de fundo:

 h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
}

Arredondando as bordas do fundo:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
background: #000;
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

Sendo que 3px é o ângulo de arredondamento. Quanto maior o número mais arredondado fica. Mantenha o mesmo número nas 4 ocorrências pois cada uma delas é um filtro para os diferentes navegadores.

Colocando imagem ao invés de cor:

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat 
height: 50px; /*altura da imagem*/
width: 200px;  /*largura da imagem*/
}

Você pode colocar faixinhas, por exemplo. Basta saber o tamanho dela e hospedar para obter a url da imagem.
Sugestões de imagens:








 Caso queira colocar uma imagem tipo papel amassadinho, por exemplo, troque no-repeat por repeat no código e mantenha os valores em height e width.

Colocando sombra no texto do título:

 h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
}


Veja como ficaria o código completo, com fundo vermelho:

h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #ff000b;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

E aqui o código completo, com a faixinha verde:

h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: transparent url(http://3.bp.blogspot.com/-9qSzwQLCQME/UhfxRyrdrRI/AAAAAAAAuXQ/XUmtp_3gk7s/s1600/popular-smaller-2.png) center no-repeat;
height: 49px;
width: 262px;
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}


Copiar os códigos

Agora é com você!
À partir desses códigos básicos você pode mudar, colocar outros tipos de imagens, colocar bordas, etc.
Não há limite!

Gostou?
Clica em curtir!
Eu agradeço!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

68 comentários , comente também!

  1. Noooossa que legal! Adorei! Assim que der vou, COM CALMA tentar!!1 beijos, obrigadão,chica

    ResponderExcluir
  2. Nossa, Elaine, que complicado, falta-me paciência pra ler com bastante atenção, e tentar e tentar....
    Por isto que eu queria uma personal blogueira.
    Valeu pelas informações preciosas.
    Beijo

    ResponderExcluir
  3. Muito boas as dicas ! Vou tentar , mas tenho medo de errar .Obrigada por compartilhar.Bjs

    ResponderExcluir
  4. Oi Elaine!
    Se gostei? Amei!!!
    Ótima dica! E a explicação, perfeita, como sempre!
    Obrigada por dividir e ensinar!
    Beijos,
    Cris

    ResponderExcluir
  5. Menina que dica legal. Estou terminando umas encomendas,Quando eu terminar vou dar umas mexidas, no meu blog. Admiro sua dedicação em compartilhar conosco suas dicas.
    Beijos e até mais!

    ResponderExcluir
  6. bom dia Eliane
    entusiasmada pelo resultado de um seu seu post, que tinha dado certo, tentei fazer esse,o resultado um desastre, tentei desfazer, mas não consegui, o blog perdeu o espaço entre a data e o titulo do post,não sei o que fazer porque jà tentei desfazer tudo, mas parece que não funciona, se você puder,dar uma olhada, e me dizer o que tenho que fazer,
    também queria peguntar quanto custa dar uma arrumada no meu blog.
    o meu email è fabioedna@alice.it

    aguardo uma resposta

    Edna


    ResponderExcluir
  7. Elaine, como há um certo tempo devido a resultados de S.E.O tinha deixado o cabeçalho dos meus gadgets em h3, modifiquei o código trocando o h2 abaixo de heading por h3, não esperava, mas aí todos os trechos em h3 nos posts também ficaram do mesmo jeito. Achei que fosse só na página inicial.

    Alguma dica? Socorro!

    ResponderExcluir
    Respostas
    1. Edson, isso acontece porque h2 também se refere aos subtítulos das postagens.
      Acho que se colocar .sidebar antes de h2 deve resolver.
      Ficaria assim: .sidebar h2

      Não testei, mas pode dar certo.
      De todo modo caso não resolva é só voltar ao que era antes.
      Você, claro, fez backup antes de mexer, né?

      Excluir
  8. Interessante. Mas eu não tenho coragem, não vá o diabo tecê-las e lá se vai o blogue.
    Um abraço

    ResponderExcluir
  9. Amo suas dicas...são sempre perfeitas!!!!

    Beijocas
    Andressa
    http://pimentasdocepimentas.blogspot.com.br/

    ResponderExcluir
  10. Ain meu Deus que difícil rsrs, eu até poderia tentar mas depois de ver que teve erros com algumas pessoas acima, resolvi deixar pra lá, ainda mais porque não tenho muita paciência. E minha internet também não ajuda kkk...

    Enfim querida, queira te pedir pra dar uma passadinha em meu blog, e se gostar seguir de volta =] Vou adorar ter você como minha leitora. Mas já vou adiantando que não tenho um blog perfeito como o seu viu ;)

    Beijos e fique com Deus, cada vez mais sucesso em toda sua vida

    BlogSemDrama.blogspot.com

    ResponderExcluir
  11. Olá Elaine, como está?
    Aqui estou eu novamente!
    Bom, é que eu utilizei também as dicas deste post lá no meu blog...
    Mas não é só para agradecer que estou aqui, também quero dizer que creditei você e seu blog (dentre dois outros) no meu último post, é porque aprendi muito aqui e acredito que este trabalho também deva ser valorizado em gestos simples e sinceros!
    Com este crédito do seu blog, com certeza estarei ajudando muito minhas leitoras a deixarem seus blogs cada vez melhores e mais funcionais, obrigada!
    Ah, eu não sei mexer direito no Google+ e acho que deletei meu perfil lá, rsrsrs, logo logo eu descubro.
    Bom, espero que não se importe de eu ter feito a referência daqui sem avisar ou pedir antes, mas, qualquer coisa, só falar que eu altero a postagem, tá?
    Até logo e parabéns!!

    ResponderExcluir
  12. Ótima dica! Já testei e amei! http://alinezanatta.blogspot.com.br/

    ResponderExcluir
  13. Oi tentei por o código h2 { pra trocar a minha mas não permite. O que eu devo fazer?

    ResponderExcluir
    Respostas
    1. Sueli, tente achar background: transparent e em lugar de transparent colocar a cor que deseja, precedida do sinal #
      bjssss

      Excluir
  14. Elaine, te agradeço muito!!! você não faz ideia do tanto q vc me ajudou!!! Muito feliz!!!
    Muito obrigado msm!!! depois olha la o resultado: http://www.makemegaby.com/
    é claro que eu estou melhorando aos poucos neh?!?! rsrsrsrs
    bjss

    ResponderExcluir
  15. Oi Elaine, tudo bem? Estou tentando criar o meu blog e pesquisando sobre como configurá-lo encontrei o seu. Estou indo devagarzinho e suas dicas estão me esclarecendo muito! Muito obrigada :D Se tiver um tempinho passa no meu ( http://bibliotecadababi.blogspot.com.br ) pra ver como está ficando, suas críticas serão muito bem-vindas ;)
    Beijinhos!

    ResponderExcluir
  16. Eu nuuunca consigo, quando aperto ctrl F e colo o que voce pede, ele nunca acha :(

    ResponderExcluir
  17. Eu naum consigo pq naum intendo como isso funciona, ME ESPLICA PFV!!!

    ResponderExcluir
  18. Elaine, amei seu blog e suas dicas!
    Mas no HTML do meu Template, não acho a tag "h2".
    Como posso fazer?
    Quero colocar as faixinhas!

    Beijão,
    www.entre-termos.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Diogo, pode colar o código antes do fechamento da folha de estilos.

      Mas seu blog tem a tag sim, pode crer.
      bjsssss

      Excluir
    2. onde colo o codigo pois eu tambem não encontro a tag h2?

      Excluir
  19. Essa é a primeira vez que não consigo colocar em prática uma dica sua (que por sinal, excelente dica).
    O meu ficou assim:
    h2 {
    font: $(widget.title.font); /*fonte do título do gadget*/
    color: $(widget.title.text.color); /*cor da fonte*/
    background: transparent url(http://1.bp.blogspot.com/-tH7hf5R9kIo/UhfxPI15dVI/AAAAAAAAuW0/IrQdF-60-qE/s1600/301+-+C%C3%B3pia.png) center no-repeat;
    height: 49px;
    width: 262px;
    text-shadow:0px 1px 1px http://cores.gratuita.com.br/; /*cor e inclinação da sombra*/
    -moz-border-radius: 3px;
    -webkit-border-radius:3px;
    -goog-ms-border-radius: 3px;
    border-radius:3px;
    }
    Mas, na hora de visualizar, é como eu não tivesse feito nenhuma modificação.

    Mas mesmo assim, obrigado por compartilhar a dica. :)

    ResponderExcluir
  20. Gostei do tutorial, me ajudou muito ^^
    http://www.aolhardeumgaroto.blogspot.com

    ResponderExcluir
  21. Olá, o blogger está agora com uma nova interface, quando eu procuro o : " { h2 " não aparece nada... Você poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Também estava com esse mesmo problema. Mas basta você clicar em qualquer lugar da caixinha de HTML e dar Ctrl+F, lá mesmo vai abrir o buscador e vc põe h2, fica apertando ENTER até achar o h2 que está abaixo da palavra "Headings". Espero ter ajudado. ^^

      http://docetefeels.blogspot.com.br

      Excluir
    2. Elleeeeeen do céu, você resolveu os meus problemas kkkkk. Esse novo editar html ta uma droga

      Excluir
  22. muito bom, foi otimo
    visita.;)
    wwwbbwdelicate.blogspot.com

    ResponderExcluir
  23. Ao contrarios dos outros blogueiros que vem divulgar seu blog, vim aqui pra agradecer, mim ajudou muito

    ResponderExcluir
  24. Respostas
    1. Sim, faço.
      Escreve pra mim e a gente combina.
      jssss

      Excluir
  25. Não consigo achar essa tag, sabe como resolver? =/

    ResponderExcluir
    Respostas
    1. Deux, todo template tem essa tag.
      Você está procurando do modo correto?
      Caso não ache cole o código antes do fechamento da folha de estilos.
      bjssss

      Excluir
  26. Oi Elaine, Tudo bem?
    Obrigada por mais esta postagem. Gostaria de saber como faço para aumentar o espaço entre o titulo do gadget e seu conteúdo. Estou procurando a dias e não encontro. Mais uma vez, sempre grata,
    Zélia Dantas
    http://amorporart.blogspot.com.br

    ResponderExcluir
  27. Ameiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii obrigada consegui fazer o meu, assim que eu terminar tudinho volto aqui e deixo o link bjim

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. ótima dica. Me ajudou bastante!

    http://meu-faz-de-conta.blogspot.com.br/

    ResponderExcluir
  30. Nossa! Muito obrigada!! Ficou lindo lá no meu blog!

    http://sentidoteen.blogspot.com.br/

    ResponderExcluir
  31. Olá Elaine!
    Fiz no meu e deu certo. Usei o código da fita vermelha, mas troquei a cor pelo rosa. Porque ficou melhor com a cor que repaginei no meu blog.
    Obrigada mais uma vez por esse lindo presente :)
    Beijinhos e Sucesso amiga!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  32. Você só esqueceu de dizer o que faço com o código novo?!
    onde coloco?

    ResponderExcluir
  33. Faz um vídeo ensinando, tá complicado '-'

    ResponderExcluir
  34. Eu fiz isso funciona muito bem, no entanto agora quero mudar o estilo do das datas dos post e nao muda nada :(

    ResponderExcluir
  35. Adorei o post, me ajudou muito e ficou direitinho lá no blog.
    Obrigada, beijos!
    http://www.leticiakoliveira.com/

    ResponderExcluir
  36. adorei! ajudou muito, ficou lindo no meu blog só que não consegui deixar a imagem com as bordas arredondadas

    ResponderExcluir
  37. Oioi, nossa você já me ajudou tanto!!! Eu gostaria de saber como desce o titulo da sidebar, não estou conseguindo! Está assim olha ~> http://imgur.com/6sMvmTG
    e meu código está assim ~> http://imgur.com/BI9tlYe
    Agradeço desde já :*

    ResponderExcluir
    Respostas
    1. Thássila, experimente acrescentar no código os valores para padding e margin.
      Sendo que margin se refere à distancia do fundo em relação às margens, e padding se refere à distância do título dentro do fundo. Sim, precisa ter um pouco de conhecimento em html para conseguir editar.
      beijosss

      Excluir
  38. Oi, Elaine, seu blog me ajudou muito, mas tenho uma dúvida, é nesse mesmo lugar que eu mudo pra colocar borda nos gadgets ? No seu outro tutorial disso não consegui copiar os links e não acha o link certo, e outra coisa, tem como eu colocar esse fundo no título de somente alguns gadgets ? Obrigadaaa

    ResponderExcluir
  39. Adoro seus tutoriais e estou adorando essa coisa de mexer nos códigos, até o que não está bem definido eu consigo fazer, por exemplo, colocar cor e centralizar no mesmo código, adorei,

    GENTEEE PRA QUEM NÃO ESTÁ ACHANDO O CÓDIGO NA CAIXINHA TEM QUE CLICAR DENTRO DA CAIXA DE TEXTO/CÓDIGOS DAI APARECE EU TAMBÉM ESTAVA CLICANDO FORA E APARECIA AQUELES ZEROS OU A QUANTIDADE ACHADA, ALGO ASSIM

    ResponderExcluir
  40. Olá, Elaine, vc está de parabéns! Seu blog é ótimo!
    Eu gostaria de trocar a fonte do título dos gadgets, como fazê-lo?
    Desde já,
    obg.
    bjão

    ResponderExcluir
  41. Muito prático! Eu tinha visto um outro tutorial bem mais complicado, indicando upar uma imagem para cada título. Optei pelo seu. "Brigadão"
    www.mais40bemcuidado.com.br

    ResponderExcluir
  42. Quando digito h2 { não encontra nada só fica um icone vermelho dizendo 0-0

    ResponderExcluir
  43. Oi Elaine,adoro suas dicas mim ajuda muito no meu blog.

    http://40grausdemoda.blogspot.com.br

    ResponderExcluir
  44. Elaine me ajuda!!
    Fiz no meu blog mas o texto fica no centro mas na parte de cima.. como eu coloco ele pra ficar centralizado no meio da imagem???

    www.rafahproject.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Rafah, tem que conhecer um pouco as propriedades margin e padding.
      No caso, margin altera o posicionamento da imagem e padding altera o posicionamento do texto do título dentro da imagem.
      Tem que ir testando até conseguir posicionar como deseja...

      Excluir
  45. Oi Elaine.
    Tentei colocar uma imagem como fundo nos títulos da minha sidebar e ao salvar nada mudou. Você pode me ajudar?

    ResponderExcluir
  46. Parabéns pelo seu trabalho. Gosto muito da sua criatividade, e o seu modo de explicar.
    Abraços musicais!

    ResponderExcluir
  47. Oi Elaine
    Seus posts me ajudaram muito na "reforma" do meu blog
    como agradecimento fiz uma menção do seu blog num post recente
    espero que goste
    https://carleanormal.blogspot.com.br/2016/05/diy-como-criar-seu-proprio-templete.html

    ResponderExcluir
  48. Oi Elaine. Eu usei esse seu tutorial e amei, porém ao centralizar os titulos dos gadgets, a data das postagens ficou centralizada também. Tem como eu arrumar isso?

    Bites!
    Tary Belmont

    ResponderExcluir
  49. Curti bastante, acabaram minha dúvidas haha
    Muito obrigado, seu blog é excelente :D

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…