30 de jun. de 2014

Fontes Diferentes no Seu Blog



Oii gente!!
E adivinhem? O meu 1º Layout Free está indo bem, e se der, libero no próximo final de semana no máximo.
Mas hoje, o tutorial é para blogger, e esse é um tuto que eu sei que muita gente quer.
Então, clique em Leia Mais para ver como é que se coloca fontes diferentes no blogger!

No título do Blog:
a) Entre no site da Google Fontes e escolha a sua fonte e clique em quick use (x)
b) Abaixo na página, ira aparecer um link (xx), copie ele e vá em Modelo>Editar HTML e pesquise por <head> e cole o link acima da tag que você procurou.
c)  Agora pesquise por .Header h1 { e você provavelmente vai encontrar algo assim:

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}
Substitua esse código por esse: 
.Header h1 {
font-family: Tangerine; /* Nome da fonte */
  font-size: 100px; /* Tamanho da Fonte */
  color: #cordafonte;  /* Cor da Fonte */
  text-align: center;  /* Alinhamento do Texto */
}
d) Substitua: o azul pelo nome da fonte que você instalou e o rosinha pela sua preferência.
e) Visualize para ver se está certinho e salve.

Na sidebar
a) Entre no site da Google Fontes e escolha a sua fonte e clique em quick use (x)
b) Abaixo na página, ira aparecer um link (xx), copie ele e vá em Modelo>Editar HTML e pesquise por <head> e cole o link acima da tag que você procurou.
c) Agora pesquise por h2 { e você vai encontrar algo assim:
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
e substitua por:
.sidebar h2 {
font-family: Tangerine; /* Nome da fonte */
  font-size: 100px; /* Tamanho da Fonte */
  color: #cordafonte;  /* Cor da Fonte */
  border-bottom: 1px dashed #cordalinha; /* Borda de baixo, se não quiser apague */
  background: #cordobg; /* Cor de fundo */
  text-align: center;  /* Alinhamento do Texto */
d) Troque o colorido de acordo com o seu gosto e o azul pelo nome da fonte.
 *Alguns efeitos para linha:
dashed: tracejado
dotted: pontilhado
solid: linha normal
e) Caso não queira fundo sólido e sim imagem, troque 
background: #cordobg; /* Cor de fundo */
 por
background: url(LINKDAIMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/ 
f) Troque o azul pelo o link da sua imagem e o rosinha pela sua preferência e de acordo com o blog.
g) Visualize para ver se está tudo certo e salve.

No título do Post
a)  Entre no site da Google Fontes e escolha a sua fonte e clique em quick use (x)
b) Abaixo na página, ira aparecer um link (xx), copie ele e vá em Modelo>Editar HTML e pesquise por <head> e cole o link acima da tag que você procurou.
c)  Agora pesquise por h3.post-title a { e você provavelmente vai encontrar algo assim:
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
Substitua esse código por: 
h3.post-title a {
font-family: Tangerine; /* Nome da fonte */
  font-size: 100px; /* Tamanho da Fonte */
  color: #cordafonte;  /* Cor da Fonte */
    background: #cordobg; /* Cor de fundo */
  text-align: center;  /* Alinhamento do Texto */
}
d) Substitua: o azul pelo nome da fonte que você instalou e o rosinha pela sua preferência.
e) Caso não queira fundo sól de cor e sim imagem, troque 
background: #cordobg; /* Cor de fundo */
 por
background: url(LINKDAIMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/ 
f) Troque o azul pelo o link da sua imagem e o rosinha pela sua preferência e de acordo com o blog.
g) Visualize para ver se está tudo certo e salve.

Esse tuto ficou um pouquinho longo, né?! Mas espero que vocês tenham gostado!
Até a próxima, beijinhos!

Um comentário: