sábado, 16 de junho de 2012

Personalizando o titulo dos gadgets

Hello Guria and Guris   Hoje eu vou ensinar a vocês como personalizar o titulo dos gadgets tipo do JD. 
Vá no seu HTML e procure por:  h2 {
Se você nunca editou esta parte do template vai estar mais ou menos assim:

Substitua o trecho destacado por:
.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #FFAEB9; /*Cor da fonte*/
background: url(http://i.imgur.com/Rjdny.png) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/ 
text-align: center; /*Alinhamento do texto*/
}

 Instalando a fonte:
- Acima de </head> cole o seguinte código:


<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'/>

Caso queiram mudar a fonte é só dar uma olhadinha neste tutorial www

 Últimos ajustes:
- No trecho:  http://i.imgur.com/Rjdny.png  vocês podem trocar por uma imagem personalizada ok? Não esquecendo de ajustar as medidas da sua imagem.

- Mais caso ao invés de uma imagem vocês queiram apenas uma cor é só substituir essa parte:



background: url(http://i.imgur.com/Rjdny.png) no-repeat center;



 Por esta:


background: #000000; /*Cor de fundo*/


 
Visualize se estiver tudo OK, salve! Dúvidas comente <3

104 comentários :

  1. Muito fácil!! Esse tipo de detalhe faz toda a diferença em um lay. Bonito e caprichoso!!!

    Beijos!!
    http://infinitaeu.blogspot.com.br/

    ResponderExcluir
  2. Ai fica muito lindo Jakie
    Acabo de entrar na blogsfera e estou sgeuindo suas dicas que estão me ajudandom muiito
    Se inscreve?

    http://onthemagiic.blogspot.com.br/

    ResponderExcluir
  3. Aiii que maravilha!vai me ajudar muiito no proximo lay!
    beijosss
    www.dreamoflife-blog.blogspot.com

    ResponderExcluir
  4. Já procurei tanto esse tutorial u-u haha

    http://garotasdelicadasbr.blogspot.com.br/

    ResponderExcluir
  5. Ótimo Tutorial Jackie fica bem fofo...
    caandydream.tk

    ResponderExcluir
  6. Amei o tutorial, eu estava procurando por ele!!! Jackie você poderia me ajudar na meta do meu blog, seguindo-o! obg!!

    Beijão Jackie!!!

    http://mundo-doce-delicioso.blogspot.com.br/

    ResponderExcluir
  7. Muito divo essa tutorial ' vou usar no meu próximo lay :) Amo aki <3

    sonhos-sinceros.blogspot.com :h:

    ResponderExcluir
  8. Eu uso um primeiro tutorial que vc ensinou, acho mais fácil!
    Pelo menos não to afim de mecher no HTML
    :H

    ResponderExcluir
  9. Eu achei que o seu blog é muito maneiro! Você posta coisas iradas! Adoro seu blog!
    Beijos!
    Misterio!
    :l:

    ResponderExcluir
  10. ei Jackie sempre ajudando suas Gurias :D
    sem fala que acho lindo seus gadgets, principalmente pelo fato de você personaliza-los com a sua cara né! Beijinhoos *
    :l:

    ResponderExcluir
  11. Amei a dica... Vou tentar fazer aqui.

    Beijos

    www.mundodajulia13.blogspot.com

    ResponderExcluir
  12. Que fofa a foto da postagem :h: !

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/ (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  13. Achei linda essa font Jackie :D

    http://anikspink.blogspot.com.br/

    ResponderExcluir
  14. Adorei o tuto =) E descobri a fonteee que eu ameeei KK- É sofia,cursive, não posso esquecer KKKK-
    Beijones amor, s2rita.blogspot.com

    ResponderExcluir
  15. fica muito fofo esse teu estilo Jackie!
    bjãooo

    ResponderExcluir
  16. Que lindo que fica Jackie *0*
    beijos, Dani
    blogDesenrola.tk

    ResponderExcluir
  17. Amiga eu não entendi muito a 3° parte pode me explicar onde fica esse head?:l:

    ResponderExcluir
  18. Tutorial Mega-útil !!! Amei

    ResponderExcluir
  19. :h: oi!!
    Adoro os seus tutos!
    super vou tentar!
    apesar que minha cabeça já ta doendo de tanto tentar arrumar meu blog :i:
    kisses!
    Bom domingo!

    ResponderExcluir
  20. Com certeza vou usar, Jackie! Coloquei na lista de tutoriais pro próximo lay (que vou ter que começar do 0 porque não tenho conseguido mudar os gadgets de lugar x.x)
    Beijos ♥

    Conspirantes

    ResponderExcluir
  21. D+! :h: Sabe, eu sigo seu blog, e queria que você pudesse seguir o meu:
    http://biancagatinhaoficial.blogspot.com.br/
    OBR!

    ResponderExcluir
  22. Super bem explicado! Fantástico! ^^
    Adoro meus gadgets quando estão super cutesss ^^
    Beijos!

    delicadissima.com

    ResponderExcluir
  23. Muito bem explicado esse tuto Jakie, adorei!
    Bjus flor

    ResponderExcluir
  24. Ótimo tutorial! Amei, Jackie, vou fazer no meu! Vou dar os créditos, claro. :h:

    ummilkshake.blogspot.com

    ResponderExcluir
  25. Fica super fofo né?!Eu já utilizei por um bom tempo,mais hoje opto pelo simples fato de um titulo sem decoração,só a fonte personalizada,simples ;P

    http://nickworldglitter.blogspot.com.br/

    ResponderExcluir
  26. Jaack ameiii o post!!!
    Bjinhos
    http://sweetworldbr.blogspot.com.br

    ResponderExcluir
  27. Como eu estava procurando um tuto assim \o/
    http://japanesegirll.blogspot.com.br/

    ResponderExcluir
  28. que post útil, maagina se não ia seer a Jackiee néh!! ASHUASHUASHUA'

    >chiclete-decanela.blogspot.com

    ResponderExcluir
  29. Ótimo tutorail Jackie, como sempre você arrasando e ajudando os outros. :)
    Beijos guria ♥

    ResponderExcluir
  30. eee^^ tava querendo um tuto assim
    vou deixa a pag em favoritos pro meu proximo lay *-*
    -xoxo

    s2juuh.blogspot.com

    ResponderExcluir
  31. Jackie, eu tava doida atas desse tutorial estavam meio mal explicados, mas esse está ótimo! adorei!

    http://isa-pequena.blogspot.com.br/

    ResponderExcluir
  32. Amei, brigado jack, esta precisando muito!!

    ResponderExcluir
  33. Jackie,que fácil!! Achei que era super difícil,mas quando li seu tuto percebi que estava enganada. Seu blog tá lindo *-* Como você colocou o "You might also like" com borda pontilhada nas imagens? Um beijo!

    www.blog-sweetluv.blogspot.com

    ResponderExcluir
  34. @Anônimo Tão difícil receber elogios em anônimo O.o
    Fiquei feliz, valeuuu <3

    ResponderExcluir
  35. menina otima postagem!
    adoro visita blog assim como o seu que não tem bestei de dividi o que sabe com as outra blogueira que esta começando
    **** um toque de magia***

    ResponderExcluir
  36. Era o que eu queria *-* rs.'
    Jackie, ensina a personalizar as postagens relacionadas, igual a sua ?

    Beijos ;*

    farryteen.blogspot.com

    ResponderExcluir
  37. Fica super fofo! Amei demais aqui <3
    http://wronggirl-ann.blogspot.com.br

    ResponderExcluir
  38. @Famosos e Cia...Se vc usa a interface antiga do blogger ... é só ir em design> Editar HTML (pronto achou o HTML do blog)

    Dê um ctrl + f para facilitar a busca (:

    Beeijus e espero te ajudado!

    ResponderExcluir
  39. Que bom que gostou das fontes, e baixou todas KAPOSDKPSO
    Beijões <3 InDelicada

    ResponderExcluir
  40. achei q era dificil!! adorei!
    bjs
    http://avidademalu.blogspot.com/ http://ohmygood-omg.blogspot.com.br/

    ResponderExcluir
  41. Jackie valeu por visitar o meu blog, queria q vc seguisse, tem como?
    Coloquei o seu blog em afiliados'
    www.beleza-e-make.blogspot.com

    ResponderExcluir
  42. Geente por favor seguem o meu blog que eu retribuo..
    Bjs com gloss
    http://beleza-e-make.blogspot.com.br

    ResponderExcluir
  43. Jackie quero te avisar que este blog copiou esta postagem e não colocou creditos!!
    http://paradise-bieber.blogspot.com.br/2012/06/personalizando-o-titulo-dos-gadgets.html
    O meu é:;
    http://topgirl01.blogspot.com.br/

    ResponderExcluir
  44. Nossa vim aqui agradecer pelo conteudo do seu blog, me ajudou bastante a personalizar o meu.
    Obrigada Jack, darei seus devidos créditos!

    ResponderExcluir
  45. Tutu fácil e bem explicado, adorei!

    http://adolescenteambulante.blogspot.com

    ResponderExcluir
  46. Ain Jackie,vc não sabe o quanto este tutorial me ajudou.Fazia tempos que eu procurava por isso.

    Muito obrigada ;3
    bonequiinha-de-luxo.blogspot.com

    ResponderExcluir
  47. Muito fácil Jackie, amei muito! Ficou lindo lá no blog, dá uma olhadinha:
    http://meninaa-ma.blogspot.com/
    Bgd', sempre ajudando muito né?!

    Carlla Amaral :B

    ResponderExcluir
  48. aiin', ameeeeeeeei esse tuto *-* , vou usar no Próximo Layout >< . Seguiiindo o Blog s2

    http://worldofimaginatioon.blogspot.com.br/

    ResponderExcluir
  49. Jaaack D= me ajuda, o meu nunca dá, faço do jeito que você diz, e nunca muda nada sempre fica na mesma Ç.Ç

    ResponderExcluir
  50. Jackie... que xuxu que ficou!!! amei... mudei a cor do meu... obrigada to aprendendo mto com o seu blog!!! :h:

    ResponderExcluir
  51. valeu msm, pelo tuto, consegui colocar no meu blog, parabens pelo lindo blog. :]:
    fotosemomentoss.blogspot.com.br/

    ResponderExcluir
  52. Amei o tuto, flor não consegui pegar nenhuma fonte, seilá que deu. Vou usar essa sua mesmo, tudo bem?

    Amei o blog, beijos.

    ResponderExcluir
  53. Amei o tutorial. Vou usar desse jeito, porque não sei mexer muito com blog e da outra vez não deu muito certo:D
    Um beijo, Malú

    ResponderExcluir
  54. o tutorial é super simples, e dá ao blog um ar super fofo! lindo demais jackie <3

    ResponderExcluir
  55. gostei muito desse totorial me ajudou muito obrigado.

    ResponderExcluir
  56. :K: AMEEEEI, Já botei o tutorial no meu blog !
    http://dama--de--ferro.blogspot.com.br/ ;c

    ResponderExcluir
  57. no meu nn foi... o problema nn foi no tutorial, foi eu mesma, eu nunca vou conseguir fazer um design legal...

    ResponderExcluir
  58. Brigadassssooooo ..... deu super certo amei por de mais !!!!
    não to seguindo o blog mas já dei 1 like na fan page.

    Beijoos

    By: Sarah Vivic
    Blog; atual-sempre.blogspot.com.br

    ResponderExcluir
  59. Não consigo mudar a fonte. Desisti já...

    ResponderExcluir
  60. Adorei! Faz um tempão que tento personalizar, mas não conseguia. Seus tutorias são ótimos, bem simples de fazer.
    Parabéns pelo blog!

    ResponderExcluir
  61. Nuss adorei jack! seu blog como sempre todo teen! beijocas!

    meussonhos-s2.blogspot.com

    ResponderExcluir
  62. Gente segui o meu blog.. prometo que retribuo! é só deixar o link nos coments do blog!
    http//:meussonhos-s2.blogspot.com.br

    ResponderExcluir
  63. amei o tutorial linda
    me ajudou muito

    ResponderExcluir
  64. oii,eu nao entendo como vcs fasem isso!!!seu blog é lindo eu queria por exemplo colocar como o seu o titulo das postagens ou as apresentçoes.nao sei,tem como tu me ajudar pff

    ResponderExcluir
    Respostas
    1. brigada *w*

      só n entendi bem a demanda?! O.o

      Excluir
  65. AAAAH' sério mesmo, seu blog é perfeito e é um dos mais mais que me ajuda a mexer em HTML! Muito obrigada mesmo Jackie!

    Beijos!
    http://www.teimosasim.blogspot.com.br/

    ResponderExcluir
  66. Eu faria o tuto se eu não tivesse template personalizado...

    ResponderExcluir
  67. Jackie não achei, o código o que eu faço?

    ResponderExcluir
  68. Amei, pequenos detalhes fazem diferençao, obg *-*

    http://purplestreakss.blogspot.com.br/

    ResponderExcluir
  69. jackie presciso muito da sua ajuda ! no meu html nunca tem nada para personaliza nunca acho por favor me ajuddaa

    ResponderExcluir
  70. Amei! Principalmente, porque você soube explicar :)

    ResponderExcluir
  71. jackie ao consigo entender nada so´consigui colocar o template o resto nada

    ResponderExcluir
  72. Adorei, visitem meu blog http://blogmeninaousada.blogspot.com.br/

    ResponderExcluir
  73. Estou amando os seus tutorias ♥ Estou aprendendo a fazer o layout do meu jeito e estou amando isso muito obrigada
    Beijos ;*

    ResponderExcluir
  74. Acho que não deu certo, mas valeu a pena testar, acabei de entrar na blogosfera e to tentando aprender com os outros, mas, você é ótima com tutoriais. Obrigada :D

    https://imperiokawaiis.blogspot.com | Espero sua visita ;3

    ResponderExcluir
  75. adoro esse tutorial porque eu posso personalizar do meu jeito =)

    ResponderExcluir
    Respostas
    1. oi pode dá uma olhada no meu blog?
      Se gostar,não esqueça de seguir.
      http://supercriativablog.blogspot.com.br/

      Excluir
  76. Amei ajudou muito só que o fundo aonde está a finha fita não está transparente que código eu uso?
    Esse é o link do meu blog : http://glamourealternativo.blogspot.com.br/

    ResponderExcluir
  77. AAAh, eu amei, fiz no meu e ficou super lindo*---*
    http://mundo-daisa.blogspot.com.br/

    ResponderExcluir
  78. noossa sua dica me ajudou muito,obg mesmo,apesar de eu ter conseguido fazer apenas com sua explicação perfeita!parabéns pelo seu blog lindo

    ResponderExcluir
  79. Consegui, só que a faixinha não aparece

    ResponderExcluir
  80. Não esta dando certo eu coloco o primeiro código e sai o tundo da barra lateral e da postagem.

    ResponderExcluir
    Respostas
    1. Você já tem essa parte do seu lay personalizada?
      Pq se estiver colocando vários códigos no mesmo lugar isso geralmente acontece...

      Excluir
  81. oi amei o post mas não consigo fazer nada os codicos dão tudo errado pode criar um blog de testes e fazer tudo isso em vídeo para mim por favor?

    ResponderExcluir
    Respostas
    1. Ale, não sei a parte que esta errando, se me disser posso tentar ajudar ;D

      Excluir
  82. Ótimo tutorial! Dá para você fazer um tutorial de como colocar efeitos em hover no título da sidebar? Ajudaria muito!

    Beijos ^^

    ResponderExcluir
  83. Ficou muito lindo e fofo, obrigado pela partilha :)
    http://walkingaroundbymm.blogspot.pt/

    ResponderExcluir
  84. Oi Jackie eu fiz do jeitinho que você ensinou mas não aparece no meu,ele aparece só no incio depois a imagem some e fica a letra normal, o que eu faço?

    ResponderExcluir
    Respostas
    1. manda print?
      dependendo do que for eu consigo ajudar (:

      Excluir

.