27/07/2012

Tutorial: Fontes diferentes no blog

Créditos ao blog Tutoriar ♥
duvido que alguém vá copiar essa foto, hahaha
 Bom dia meus chicletes 
 Tudo bem com vocês? Espero que sim. Hoje vim trazer um tutorial que eu amo, e acho que ajuda (e muito) a deixar o blog mais personalizado.
 Sabe essa fonte do título dos posts daqui do blog? Poisé, ele não é uma das fontes disponibilizadas pelo blogger, mas sim uma do Google Web Fonts.
 Quer saber como funciona? Então clica em Leia Mais!

 Primeiro acesse o Google Web Fonts clicando aqui. Vai estar mais ou menos assim:
clique para aumentar
 Se você quiser um tipo de fonte em especial, você pode filtrar a sua pesquisa assim:
clique para aumentar
 Depois você escolhe a fonte que quer usar e clica em "Quick Use", assim:
clique para aumentar
 Vai abrir uma página mais ou menos assim:
clique para aumentar
 Aí você abaixa ela até aparecer um código tipo o da imagem abaixo. 
clique para aumentar
Vá no seu blog em Design Editar HTML Expandir Modelos de Widgets Tecle Ctrl+F e procure por </head>
 Cole o código que você pegou acima de </head> e altere o final dele, que vai estar sendo fechado com um ">" e você só precisa mudar para "/>". Não entendeu? Deixa eu explicar:
Código normal: <link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
Código editado: <link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'/>
  Melhor agora, né? Agora a sua fonte já está instalada. Volte á página do Google Web Fonts e copie o código CSS da fonte, que vai ser tipo o da imagem abaixo:
clique para aumentar
 Aí é só você colocar ele embaixo de:
font: $(body.font); <-------- Caso queira o código na fonte do texto do blog
font: $(widget.title.font); <-------- Caso queira a fonte nos títulos dos gadgets
h3.post-title a { <--------- Caso queira a fonte nos títulos das postagens
 Fácil, né? Eu super recomendo esse tutorial!
 Lindas e lindos, alguns leitores foram tentar o tutorial e acabou dando erro, por isso aqui estou eu pra explicar, ok? Vou explicar o código da fonte personalizada no título dos posts. 
 Esse print é de antes de eu editar:
clique para aumentar
  Ok, faça todo o tutorial até chegar na parte de colocar o código onde quer usar. Tecle Ctrl+F e procure por: h3.post-title a {
 Vai aparecer um código mais ou menos assim:
  Aí você apaga o que está selecionado ali no print e troca pelo seguinte código:
  Pra facilitar pra vocês, é colocar:
font: normal 65px "NOMEDAFONTE", mododafonte;
 Você pode mudar o normal por bold, underline ou italic, mas eu recomendo como normal mesmo. Pode mudar, diminuindo ou aumentando, o 65px, pra aumentar o tamanho da fonte do título. E tem que mudar, obviamente, o "NOMEDASUAFONTE", mododafonte; pelo nome e pelo modo da fonte. E como você vê eles? Lá na página onde tem os códigos da sua fonte:
 Vai ser igual a esse código selecionado da foto, só que vai ter o nome da fonte que você escolheu. Ah, e ainda naquela parte do HTML, você pode mudar essa coisinha:
  Sabe quando você passa o mouse em cima do título da postagem do seu blog e ela fica sublinhada? Poisé, mudando aquilo ali (onde antes tinha escrito "underline") você pode acabar com isso! Não sei vocês, mas eu prefiro com esse tutorial.
 E o meu resultado foi esse:
clique para aumentar
 Espero que consigam!
 E aí, gostaram? Espero que sim. Caso alguém tenha alguma dúvida é só me avisar por comentário que eu vou tentar ajudar, ok? Ah, e vocês podem instalar quantas fontes quiserem no blog!
 É isso. Beijinhos com glitter :*

50 comentários:

  1. Tentei fazer o tutorial, mas não deu certo :(
    Adorei o tuto!
    Beijinhos!

    ResponderExcluir
    Respostas
    1. Poxa, vou ver aqui se tem algo que eu possa fazer pra ajudar, ok?
      Bom que gostou, Ali!

      Excluir
    2. Eu também fiz o tutorial, mais nao fiincionou no título do post, continua com a mesma fonte..não sei pq..será que é por caousa dos marcadores, comentários e o autor abaixo do titulo do post?? Me ajude pf :)

      http://loucapordocesoficial.blogspot.com.br/

      Excluir
    3. Oi flor! Você usou o tutorial nesse mesmo link que me mandou? Se sim, é porque na hora de instalar você colocou:
      "font-family: 'Playball', cursive;
      font: normal bold 20px Vollkorn;
      Tem que trocar isso por:
      font: bold 20px "Playball", cursive;
      Espero que consiga :3

      Excluir
    4. Funcionou, obrigada mesmo :)
      Ps: adoro seu blog *-*

      Beijos Missy

      Excluir
    5. Ooown, que bom flor! Fico feliz que tenha conseguido *3*
      E muito obrigada, viu? Ler um recadinho desses me deixa super feliz <3

      Excluir
  2. AAAAAAAAAAA Não acredito, estava querendo um tutorial assim para o novo layout do Acesso Permitido em Agosto, principalmente por que Agosto é um mês muito especial para mim, mas não consegui, não entendi o por que! Fiz tudo direitinho, seu tutorial tá bem fácil de entender!! mimimi!!

    Acesso Permitido.

    ResponderExcluir
    Respostas
    1. Poxa, porque será que tá dando problema? Como eu disse pra Ali, vou tentar fazer em um blog de testes e ver o que que eu errei, ok?

      Excluir
  3. Adorei o tutorial paulinha! <3
    Acho que ficou bem legal o post!
    Tem post novo no GA,dá uma conferida,te espero lá viu?
    Beijinhos :*
    http://garota-amargurada.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou, Leh!
      Aaah, que bom ^^

      Excluir
  4. adorei, ótimo tutorial!
    beijos
    worldofgirls-oficial.blogspot.com visite tb umafuturaskatista.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou, Keth! Beijinhos :*

      Excluir
  5. adoreiiii,ameiii o tutorial,super, bjs,umdoceolharrosa.blogspot.com.br

    ResponderExcluir
  6. Amei o tuto, deixa o blog bem mais bonito.
    Kisses =3 '
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  7. Dificil haha.
    Mas estou bem com minha fonte :)
    Beijo, Lili --->
    Princesa Imperfeita

    ResponderExcluir
    Respostas
    1. Nãaao, que isso, só ficou grande porque tem várias imagens *---*

      Excluir
  8. Adorei! Vou tentar colocar,mas na parte de "head" cola em cima,abaixo,após,antes...?
    Nanda <3

    delicatepinkties.blogspot.com

    ResponderExcluir
    Respostas
    1. Acima ^^
      Pode deixar que eu vou atualizar ali, ok?

      Excluir
  9. De vez em quando eu vejo esse tutorial e quando preciso acabo perdendo e não lembro onde achei acredita? :B Mas impossível não esquecer, já que foi postado no PC <3
    Vou ver se uso a fonte do Google Web Fontes no próximo layout do blog. (:

    Um beijo, Anna.
    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  10. Gostei do tutorial,eles são bem uteis!
    Bjs
    www.jujuba-amp.blogspot.com

    ResponderExcluir
  11. Uso muito esse tuto, acho mega essencial para um layout ^^

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  12. Muito bom o tutorial *-* http://confissoesdeumablogueira.blogspot.com.br/

    ResponderExcluir
  13. gostei do tuto, mas nunca na minha vida irei tentar, ta louca! eu enlouqueço hahhaa
    Vou paticipar do sorteio :) é tah bem atrasada minha comemoração, haha e q tal o texto?
    bj
    lamourmonage.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou! Aaah, que pena ><
      Okok :3

      Excluir
  14. adorei o tuto flor '
    se gostar, segue ? Obrigada.
    Beeijos ;*
    http://itsblond.blogspot.com.br/

    ResponderExcluir
  15. aaa agr siim eu entendii, eu ja tentei esse tutorial varias vezes e nunk da certo, vou fazer no blog de testes se der certovou usar no meu lay free
    bjoos

    http://mundoodasblogueiras.blogspot.com/

    ResponderExcluir
    Respostas
    1. Aaah, que bom flor! Tomara que dê certo ;)
      Beijinhos!

      Excluir
  16. Essas fontes diferentes dão um visual bem diferente msm no blog. Amei o tuto!
    Bjs, Stardolleiras

    ResponderExcluir
  17. Não consegui... Eu não achei o texto onde era para colocar como o titulo do post e nem do gadget, só como texto do blog... :(

    ResponderExcluir
    Respostas
    1. Mas depende, qual o modelo do blogger você usa. Eu uso o Travel, e usei ele pra esse tutorial

      Excluir
    2. Aah! Obrigada :3 Eu não consigo e nem faço ideia (sempre tentei) como mexer no modelo travel. Tem como você descobrir ou reblogar e postar aqui no Piink Cookie? :)

      Excluir
    3. Eu não consigo e nem faço ideia de como mexe no modelo Travel. Claro que eu já tentei, mas não consigo. Tem como você descobrir Txia? HAHA ><

      Excluir
    4. Aaah, ok, mas qual o modelo que você usa?

      Excluir
  18. NHAAAAAA <3 TINHA O Winter Is Coming <3

    ResponderExcluir
  19. AAwn, Nossa cara.. Muito obrigada por esse tutorial.. Ajudou muito, O outro eu fiz vendo o do Kawaii World Mas eu não conseguia mudar o tamanho ._.
    Foi complicado tirar a antiga fonte porque eu sou burra -q- Mas deu certo
    Muito obrigada pelo tutorial, eu geralmente não comento por estar com pressa, mas fiquei muito feliz de ter conseguido ♥
    Se puder visitar ( ou conhecer o Jogo )
    tudosobreamordoce.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Aaaawn, que bom que conseguiu então flor *u* Disponha ><
      Aaah, okok, vou ir lá visitar :3 Eu me interesso muito por esse jogo, mas nunca acho um blog que explique o que é e como é TT^TT

      Excluir
  20. Meuu Deus :3,estou fazendo um layout procurava outros blog com esse tuto e nunca dava certo..finalmente achei,colocarei os créditos no novo layout do meu blog,já tava com dor de cabeça pois eu não consegui,e achei aqui ! u3u'

    ResponderExcluir
  21. Consegui \õ Aleluia , aleluia ♪♪ Obrigada deu certo de primeira !
    Beijos :)


    Cinderela Sqñ - Perfil

    ResponderExcluir
  22. Fiz tudo certinho, mas não consegui mudar a cor do título =(

    ResponderExcluir
  23. Por algum motivo, meu título ficou sublinhado ): Já fiz tudo que é possível e ele continua assim. Dá uma olhada, pequenaleitora.com

    ResponderExcluir
  24. My amoooooooor , conseguii ♥
    Te amo rs'
    Sempre quis , já entrei em uns 20 milhoes de blogs , eu tentava e nãao conseguia !
    Irei colocar creditos :)

    ResponderExcluir
  25. no caso eu queria saber como muda o t´tulo do layout,pode me explicar??

    ResponderExcluir