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

84 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. :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
  19. 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
  20. D+! :h: Sabe, eu sigo seu blog, e queria que você pudesse seguir o meu:
    http://biancagatinhaoficial.blogspot.com.br/
    OBR!

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

    delicadissima.com

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

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

    ummilkshake.blogspot.com

    ResponderExcluir
  24. 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
  25. Jaack ameiii o post!!!
    Bjinhos
    http://sweetworldbr.blogspot.com.br

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

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

    >chiclete-decanela.blogspot.com

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

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

    s2juuh.blogspot.com

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

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

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

    ResponderExcluir
  32. 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
  33. @Anônimo Tão difícil receber elogios em anônimo O.o
    Fiquei feliz, valeuuu <3

    ResponderExcluir
  34. 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
  35. Era o que eu queria *-* rs.'
    Jackie, ensina a personalizar as postagens relacionadas, igual a sua ?

    Beijos ;*

    farryteen.blogspot.com

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

    ResponderExcluir
  37. @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
  38. Que bom que gostou das fontes, e baixou todas KAPOSDKPSO
    Beijões <3 InDelicada

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

    ResponderExcluir
  40. 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
  41. Geente por favor seguem o meu blog que eu retribuo..
    Bjs com gloss
    http://beleza-e-make.blogspot.com.br

    ResponderExcluir
  42. 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
  43. Nossa vim aqui agradecer pelo conteudo do seu blog, me ajudou bastante a personalizar o meu.
    Obrigada Jack, darei seus devidos créditos!

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

    http://adolescenteambulante.blogspot.com

    ResponderExcluir
  45. 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
  46. 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
  47. aiin', ameeeeeeeei esse tuto *-* , vou usar no Próximo Layout >< . Seguiiindo o Blog s2

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

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

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

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

    ResponderExcluir
  51. 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
  52. 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
  53. o tutorial é super simples, e dá ao blog um ar super fofo! lindo demais jackie <3

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

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

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

    ResponderExcluir
  57. 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
  58. Não consigo mudar a fonte. Desisti já...

    ResponderExcluir
  59. 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
  60. Nuss adorei jack! seu blog como sempre todo teen! beijocas!

    meussonhos-s2.blogspot.com

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

    ResponderExcluir
  62. 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
  63. 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
  64. Eu faria o tuto se eu não tivesse template personalizado...

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

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

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

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

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

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

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

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

    ResponderExcluir