Páginas

31 janeiro 2012

Personalize os títulos dos gadgets

Tumblr_lyiw0rhbj41r77neyo1_500_large
Olá cherries! Vamos continuar com a maratona de tutoriais. Hoje você vai aprender como personalizar os títulos dos gadgets da sidebar.
Eu vou mostrar onde você deve mexer, e passar um código básico, mas você pode usar sua criatividade para fazer outras alterações e criar diferentes estilos.

No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Apague toda essa parte e no lugar coloque esse código:
.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:
background: #fbfbfb; /*Cor de fundo*/
Por isso:
background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/ 
Visualize se está tudo certo e salve. A partir desse código você pode aplicar outros efeitos, como sombra, bordas arredondadas e outros estilos de bordas. Espero que tenha sido útil. Se usarem, não esqueçam dos créditos ok ;D Amanhã tem mais tutorial, aguardem!



94 comentários:

  1. Adoro tutorias deste tipo, já uso em diversos blogs *-*

    Beijos amr, http://world-cutest.blogspot.com/

    ResponderExcluir
  2. Olá querida, fiz do jeitinho que vc ensina, mas as letras ficam preta e não aparece a imagem de fundo. Será que tenho que mudar alguma coisas na variável h2?
    Desde já muito obrigada!

    Xeruuuuuuuuu

    ResponderExcluir
    Respostas
    1. não faço parte desse blog, mais eu acho que em
      color: #000000 você muda os 0's pela cor que vc quer, já que essa cor acima é preta.

      Excluir
  3. Oii liah será que da pra você postar tutorial de como fazer layout no photofiltre ou photoscape?

    ResponderExcluir
    Respostas
    1. Rsrs "Layout" em programas de edição de imagem ?? kkk

      Excluir
    2. Miia Chan dá para fazer sim...

      Excluir
    3. Miia ela quis dizer o cabeçalho flor / Eu acho kkkk.. E no photoscape da pra fazer pq os do meu blog eu faço la..

      http://crysmaier.blogspot.com.br/

      Excluir
    4. é so vc baixar uma imagem de "capa" com fundo transparente , e baixar letrars diferentes e tbm baixar imagens sem fundo so a imagem e ir fazendo do seu jeitinho bem simples e fácil.

      Excluir
  4. fassa um video encinando como fazer o  seu blog lindo

    ResponderExcluir
  5. Olha o ultimo post do meu blog ( http://sonhosdeumadocegarota.blogspot.com/ ), tem um selinho pra você lá!

    ResponderExcluir
  6. Oi Liah, adoro o seu blog, gosteei muito desse tutorial e já coloquei no meu blog.
    rubi-biju.blogspot.com
    Ele ta no começinho , mas eu sempre venho lendo as dicas do Cherry Bomb pra deixar ele mais bonito! Gostaria muito que você o visitasse e desse sua opinião!
    Beijinho Maria

    ResponderExcluir
  7. pf favor fala qual a font do titulo do blog e qual como como vc fez o efeito de rasgado  des de agora obrigada

    ResponderExcluir
  8. Eu adoro seu blog.
    estou seguindo http://subretudoumpouco.blogspot.com/  Se gostar segue?

    ResponderExcluir
  9. O nome da fonte do titulo é Comfortaa

    ResponderExcluir
  10. Apoio a idéia dela õ/ :Tarsilinha-barbosa são poucos os blogs que realmente ensinam fazer o Layout, não apenas em mecher em algumas partes sabe fazer o lay... eu sempre quis aprender!!!

    Otimo Tuto!! Parabéns bem explicado!!!
    Beijo

    ResponderExcluir
  11. Amei o tutorial, gosto muito de personalizar o título do gadget.
    Passa lá, Liah, você anda sumida! Bjs.

    ResponderExcluir
  12. Tá perfeitissimo liah, seus tutoriais me ajudaram muito, fiquei até perdida na hora de abrir os tutoriais, eu quase abri tudo em um monte de aba kkkkk'
    Gostaria de saber quando você abre afiliação ... podia abrir mais 2 vagas ;p ^^
    Cheque meu blog: Garota do olhar Sincero - garotadoolharsincero.blogspot.com
    Assinado:

    ResponderExcluir
  13. Oi, flor!
    Segue meu blog, já estou seguindo o seu!
    www.coisasdemenina-vicky.blogspot.com
    Se voc quiser eu tbm tenho um blog da Selena:
    www.clubeselenagomezdiva.blogspot.com

    ResponderExcluir
  14. Que legal! Vou usar!
    http://cantoseencantosdahellen.blogspot.com/ 

    ResponderExcluir
  15. Adorei! Muito útil para quem quer ter um blog bonito mas simples, sem um cabeçalho profissional. Vou usar no próximo layout! Beijinhos!

    blog-bola-de-chiclete.blogspot.com

    ResponderExcluir
  16. Adoro maratona de tutoriais a do Cherry Bomb então, nem se fala. Mas enfim, concordo: tem que usar a criatividade para fazer títulos diferentes, a imaginação não tem limite.
    Beijos,http://paraisodemenina.blogspot.com/

    ResponderExcluir
  17. Oiee meu nome é vanessa e amei seu blog estou seguindo tem concurso la no meu blog participe!porfavor!!!

    livina-teendream.blogspot.com

    ResponderExcluir
  18. Me ajudou muito flor e amei o tutorial, gosto muitoo do seu blog ele é super fofo.

    http://blog-fun-world.blogspot.com 

    ResponderExcluir
  19. Não achei o código

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

    Existe algum outr modo alternativo?

    ResponderExcluir
  20. Liah, você me salvou...Vou afzer um design aí e precisa desse tuto :)
    brigadaaaa.

    www.magic--teens.blogspot.com

    ResponderExcluir
  21. Tentei fazer, mas não consigoo. Help me!

    ResponderExcluir
  22. Lindaa, amo o seu blog, tipo ele é muito perfeito! Eu queria saber como mudar o titúlo das postagens, fica uma fonte tão feiinha u-u http://sejavocemesmaa.blogspot.com.br/ Meu blog de textos u-u

    ResponderExcluir
  23. oi flor passa no meu blog...adoro seus tutoriais!!
    fiz o layout seguindo seus tutorias e goodies *--*
    ótimo dia bjs!
    http://sundaemorango.blogspot.com.br/

    ResponderExcluir
  24. nao conseguir.. se colocar a cor fica normal, mais se coloco imagem nao aparece nada

    ResponderExcluir
  25. Muito Bom seu post, deu supper certo, obrigada

    ResponderExcluir
  26. amei as dicas,seguindo aki,me segue de volta bjs

    ResponderExcluir
  27. Legal,adorei!
    Só que a letra fica acima do fundo como faço pra tirar esse bug?

    ResponderExcluir
  28. Oi Liah, tentei colocar a imagem no fundo mas não deu certo. VocÊ tem ideia do que pode ser? A imagem não aparece :(

    ResponderExcluir
  29. Eu consegui, liah você e demais cara *--*' aceita afilhação :3 ' coontato: http://www.facebook.com/giullya.rosa ' obg!
    nhaac>>> ' www.bomb-girls.blogspot.com.br ! não acabei de contruir ainda né , mais se gosta do meu cantinho segue! obg,amo-amo-amo- o se blogzão!

    ResponderExcluir
  30. como eu faço para mudar a fonte titulo do Gadgets om esse efeito?
    Emilia
    Coffemilia.blogspot.com.br

    ResponderExcluir
  31. Nossa amiga, tva há séculos tentndo isso e o seu tutorial foi que iluminou! Segui o passo a passo e deu tudo certinho, inclusive usei uma imagem bem fofa
    Thanks!
    Beeijo

    ResponderExcluir
  32. e agora? como colocar a foto que eu quero ?

    ResponderExcluir
  33. Não deu certo não :/
    Visitem meu blog complexafelicidade.blogspot.com

    ResponderExcluir
  34. Ola
    Mto obrigada, deu certo no meu blog, gostei mto.
    www.sjimenescriandoepersonalizando.com

    ResponderExcluir
  35. Ai meus Deus sou nova no mundo dos blogs e estou levando maior surra, esse foi o unico tutotrial que encontrei que de fato me explicou alguma coisa de modo claro e simple. Tentei fazer mas as letras ficaram pretas nao consegui mudar a cor e nem colocar imagens que será que aconteceu? bjss

    ResponderExcluir
  36. e agora estou tentando desfazer para ficar como era antes e nao consigo tambem. ME AJUDAAAA POR FAVOR!

    ResponderExcluir
  37. ahaha meu marido conseguiu pra mim, muito obrigada agora a proxima fase a pernder a colocar a imagem , muito obrigada!

    ResponderExcluir
  38. Ameiiiiiiiiiiiiii Seu Blogg Foi O Melhor q eu ja vi sem brincadeira alguma *-* *---* *_* *u*

    ResponderExcluir
  39. Liah... o meu não está dando certo, não sei o que acontece!!!
    Estou fazendo uma reforma e a personalização do título antiga era azul, agora eu mudo a cor e continua!!! O que eu faço???
    Ahhh... já tentei colar novamente mais não dá certo!!! :(

    ResponderExcluir
  40. entra em www.postsdemagarotaa.blogspot.com.br
    seguee lahh??
    pf!! ameii o tuttoriall

    ResponderExcluir
  41. usando, kissus AMO O SEU BLOG !!!!!!! http://menina-inteligentee.blogspot.com/

    ResponderExcluir
  42. Gostaria de saber como fazer um quadrinho desse que tem no seu blo dando as boas vindas aos leitores.

    zenildo4@yahoo.com.br

    ResponderExcluir
  43. oie me ajuda aqui to desesperada! não consegui fazer, quero me ajude de uma forma um pouquinho mais facil, e eu também tenho outras duvidas, deixa a resposta la no meu blog por favor ou me da o seu e-mail. http://acerejarosa.blogspot.com.br/

    ResponderExcluir
  44. Oi Liah a um Tempo uso ele no meu blog ,Mas decidi Dar uma mudada agora não consigo tiralo,Ja tentei apagar o codigo Mas não pega ,Não quer sair de jeito nenhum se você puder me ajudar ! :D Agradeço.

    ResponderExcluir
  45. Ajudou muito, sempre vejo seus tutorias !
    Visitem : digitandomoda.blogspot.com.br

    ResponderExcluir
  46. Usei e deu super certo....Valeu!!!
    www.portodeestilo.blogspot.com

    ResponderExcluir
  47. Otimo tutorial.
    Esse é um dos
    melhores blogs
    que conheço.

    ResponderExcluir
  48. Florzinha obrigada por ajudar.
    Deus abençoe!!!
    Tenha dias felizes...
    Bjokas...da Bia!!!

    ResponderExcluir
  49. Muito obrigadaaaaaa! Ficou super cute! *-*

    ResponderExcluir
  50. Ajudou muito! Obrigada! Beijinhos *-*

    ResponderExcluir
  51. Fazia tempo que tentava arrumar meu blog, e nunca batia com os tutorias... Dai mudei o layout pra viagem, e deu certo hehe
    Tava ficando sem paciência já :X
    Esse tutorial ajudou muito,quer dizer, seu blog me ajuda MUITO !
    Obrigada, a parabéns ^^
    beijo.
    http://humorlimao.blogspot.com.br/

    ResponderExcluir
  52. Entro nesse blog por esse: http://oclubedacamila.blogspot.com.br/p/creditos_30.html
    E procuro o que não encontro em outros por ai que é um bom tutorial mas não consigo encontrar h2 { pois o modelo do meu blog é 2013 e preciso desse tutorial atualizado para 2013 pois ta ruim pra fazer qualquer coisa aqui no HTML!!!
    Me ajuda por favor!!!
    Preciso desse tutorial atualizado
    Se vc atualizar pode entrar em meu blog e comentar lá o link do tutorial atualizado?
    Obrigado

    ResponderExcluir
  53. Acho que o meu é o único que não funcionou!

    ResponderExcluir
  54. Olá querida, muito obrigada! Seu tutorial foi muito rapido e de fácil compreensão! Amei! ;)
    Josy Queiroz
    http://www.tricoecroche.com/

    ResponderExcluir
  55. Tutorial muito legal mano, mas tava querendo saber se colocando uma imagem .gif ela continua animada.

    http://bemdahorinha.blogspot.com/

    ResponderExcluir
  56. Muito Bom Seus Tutoriais. Obrigado Ajudou Muito.
    Pois Comecei Criar Um Template.

    http://teste-otakuandotome.blogspot.com.br/

    ResponderExcluir
  57. Porque quando eu aperto o ctrl+f e coloco o que ela pediu não apareçe nada no meu ?

    ResponderExcluir
    Respostas
    1. Não faço parte do blog, mas antes de procurara vc tem que clicar no quadro de html...

      Excluir
  58. Oii... Muito legal mesmo, eu amei,, obrigada liah!!!
    http://isadiniz-blog.blogspot.com/ (***site em construção***)

    ResponderExcluir
  59. Ola eu gostaria de alinhar o texto mais para baixo tem como??ai ta o link para voce ver http://aeonskin.blogspot.com.br/

    ResponderExcluir
  60. Nao preciso mais ja consegui so adicionei a propriedade padding
    e eu alinhei :D

    ResponderExcluir
  61. minha flor vc não sabe como vc esta me ajudando muito bem explicado amei bjs brigada por isto bjs.de ludemila

    ResponderExcluir
  62. Eu não estou conseguindo. Eu cilco no "f3" e copio e colo o que você esta falando, mas eu não acho NADA :(

    ResponderExcluir
  63. Obrigada me ajudou mt. http://blogdicasdelivros.blogspot.com.br/ visitem pfvr

    ResponderExcluir
  64. Ai ficou tão lindinho valeu mesmo os seus tutoriais são sempre super úteis!
    Só não dou o link do meu blog pois está em reforma!

    ResponderExcluir
  65. Muito Obrigado, precisa muito fazer isso

    :D

    ResponderExcluir
  66. Não consegui mudar colocando imagem, mas mudei pra uma fote que eu gosto muito a do meu Bloco de notas que eu personalizei, e mudei a cor Obg :)

    ResponderExcluir
  67. Ótimo ! Só queria saber como trocar a cor da coluna inteira. O meu modelo é Janela de Imagem...

    ResponderExcluir
  68. Muito bom mesmo!!
    http://littlegirlstyle.blogspot.com.br/

    ResponderExcluir
  69. Amei amei amei rsrsr melhor blog do MUNDOOOO

    ResponderExcluir
  70. Oi Liah, no meu blog de teste deu certo, no entanto no blog, que eu quero usar, eu coloco o código e coloco pra visualizar e nada, sera o que? O que esta acontecendo? Fiz e tudo certinho e nada se puder me falar agradeço bjs
    http://www.jeitosimplesdeser.com.br/

    ResponderExcluir
  71. Eu amo esse blog ♥ Muito legal, adorei beijos!
    http://jenniferfivestars.blogspot.com.br/

    ResponderExcluir
  72. Super util, obrigada. :3

    https://imperio--kawaii.blogspot.com

    ResponderExcluir
  73. mt legal, mais achei dfc.

    sweet-candy-ofc.blogspot.com

    ResponderExcluir
  74. Obrigado pelo tutorial funcionou super bem no meu blog!
    www.mateusff.blogspot.com

    ResponderExcluir
  75. Obrigada! Adorei o tutorial, deu certinho no meu blog.
    http://natalibispo.blogspot.com.br/

    ResponderExcluir
  76. Até deixei o seu blog na barra de favoritos, me ajudou muito e esté muito bem explicado, excelente! obrigada!

    http://my-hair-is-drunk.blogspot.pt/

    ResponderExcluir
  77. Sou blogueira desde 2009... agora com este tutorial está dando certinho.
    Obrigada Cherry.

    ResponderExcluir
  78. vALEU, ficou em http://cantinhodenoticias.blogspot.com/

    ResponderExcluir
  79. Eu aperto ctrl+f mas qnd digito h2 não aparece o codigo...oq faço?

    ResponderExcluir
  80. Por favor, me responde!!!
    Eu to usando o google fonts. O que devo copiar e colar no html para
    funcionar a fonte?

    ResponderExcluir