terça-feira, 31 de julho de 2012

Fontes Personalizadas no seu blog!

que coisa mais linda!
Oi, minhas estrelinhas!
Tudo bem?
Espero que sim!
Hoje, vim trazer o primeiro tutorial do blog. Eu vi ele no lindo do Piink Cookie, então todos os créditos são para ele, ok?
O tuto é de como colocar a fonte personalizada, como a do título dos posts, dos gadgets ou até do texto do blog. 
Confere aí e divirta-se:

Primeiro, vá a esse site. É o Google Web Fonts, o site onde vamos pegar todo o material para nosso tutorial dar certo. (ou parte dele).
Ele vai estar assim:
Agora, escolha uma fonte que você ache bonita. Achou? Então clique aqui:
(quick-use)
Vai abrir uma página, mais ou menos assim:
Abaixe um pouco e você vai encontrar isso: 
(clique para ampliar)
Agora, fique nessa página! Mas abra outra aba, que seria o HTML do seu blog. 
Clique na caixinha "expandir modelos de widget" e aperte F3.
Logo que abrir a caixinha, coloque esse código: </head>
 Achou? Então, cole o código lá de cima (última imagem acima) em acima de </head>
No final do seu código, vai estar fechado com um ">" e a única coisa para mudar, é trocar esse ">" por um "/>". Meio que isso:
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'/>
          Entendeu agora? Ficou mais fácil, né?  
Colou agora? Ok. Por enquanto tudo certo. Salve as alterações. 
Agora volte a aquela página que eu falei para deixar aberta e copie esse código:
 Agora, preste atenção em onde você quer colocar a sua fonte personalizada: 


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

E copie o código do CSS. Aí, cole em baixo do código de onde você quer que fique a fonte. (códigos acima)
(isso com a caixinha "expandir modelos de widget" ainda selecionada)
Salve as alterações ainda com a caixinha "expandir.... de widgets selecionada" 
Agora, aperte F3 e procure por
 h3.post-title a {


   Achou? Vai aparecer um código parecido com esse:
                                              Apague esse código que a setinha rosa está apontando.    

                                                 Troque ele por:
font: normal 65px "NOMEDAFONTE", mododafonte;

Claro, edite o "NOMEDAFONTE" e o "mododafonte".
Pode aumentar ou diminuir o xp, que agora estará com 65px;
E é isso, lindas!
Gostaram? Lembre-se, o tutorial tem créditos, e tem uma imagem que eu tirei o logo do Piink Cookie, porque eu tava com preguiça de tirar print, mas se preciso, Paula, eu tiro um novo;
Então, é isso.
Beijinhos! 





18 comentários:

  1. Que Legal o tuto ! Já sabia dele . O blog fica muuito fofo . haha '

    Beeeijo Linda ~~ the--crazy--girl.blogspot.com

    ResponderExcluir
  2. Vou usar no lay My Mustache ;)
    Nanda <3

    delicatepinkties.blogspot.com

    ResponderExcluir
  3. Que show *o*
    Não sabia dele ainda ! HEHE '
    Mais qualquer dia eu vou usar ...
    Beeeijo , Beeijo , Beeijo , Beeijinho Beeijãao . (8'

    RAAWAAR ~> http://the-skulls-attacks.blogspot.com.br/

    ResponderExcluir
  4. Não sabia desse tuto, amei. http://carolmarinho-parameninas.blogspot.com.br/

    ResponderExcluir
  5. Nãosabia que podia fazer isso!
    Aah nossa quanta post legal eu perdi ;/

    ResponderExcluir
  6. Amei o tutorial!Fica lindo,usarei no próximo layout!
    # ~~> A Garota de Preto

    ResponderExcluir
  7. Queria saber como você coloca essa imagem (escrito simplesmente doçura) no seu blog ? Tentei colocar no meu e infelizmente não conseguir ! Me ajuda !

    ResponderExcluir
  8. Amore como faz para colocar nas páginas do Blog

    ResponderExcluir

Olá, amores! Espero que tenham gostado do blog! Deem sua opinião do post, do blog e do designer, seguindo duas regrinhas:

*Nada de brigas ou xingamentos
*E divirtam-se

Beijinhos,
Ali.