22 de out de 2012

Como colocar fontes diferentes no Blogger

Olá amigos blogueiros! Hoje, trago uma dica simples, mas que algumas pessoas ainda me perguntam. Mas como é que você faz para colocar uma fonte diferente no blog? Sabe, aquele estilo de texto diferente, que dá um estilo legal para o blog. E tudo, você aprenderá em um simples e rápido tutorial. O que é necessário, é que você preste bastante atenção a um detalhe, pois sem ele, o código consequentemente não funcionará.

Primeiramente, acesse esse o site abaixo e escolha a fonte de seu agrado:



Hoje, com a nova interface do Blogger, já não é tão necessário seguir esse tutorial para alterar a fonte, mas se seu template for modificado, siga os passos abaixo, e seja feliz.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo 
 Fazer backup/Restaurar  Fazer download do modelo completo.



2° passo: Após a escolha, clique em  "Click to embed Astloch".




3° passo: Agora, clique em "Use this font"





4° passo: Copie então o primeiro código como mostra a imagem abaixo:



Agora atenção: O código copiado será assim como o citado como exemplo abaixo:


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


O que você precisa fazer agora é ir até o seu blog e abaixo de:

<head>
Colar o código. Agora coloque uma barra ao final do endereço, antes de >

Ficará assim:


O código original:

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

O código com a barra:

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

Atenção novamente: se esse procedimento não for feito, o Blogger não aceitará o código, e aparecerá um ERRO.


5° passo: Agora, volte na página e copie o segundo código: 





O código ficará assim:

font-family: 'Astloch', arial, serif;


Agora vamos fazer com que o Blogger identifique onde ficarão as letras diferentes.


Para que os títulos da sidebar fiquem com o novo estilo de letras instaladas


Procure por:

.sidebar h2 {

Cole então o código abaixo dele



Para que os títulos da postagens fiquem com as letras diferentes


Procure por:

.post h3 {

Cole então o código abaixo dele

Para que os título do blog fique com as letras diferentes



Procure por:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}



E então substitua por este:

#header h1 {
  font-family: 'UnifrakturMaguntia', arial, serif;
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  font-size: 50px;
  letter-spacing:.2em;
 }



Para usar a fonte diferente no texto das postagens


Procure por:

.post {

E  abaixo dele cole o código.


Para aumentar o tamanho da fonte:

Procure por :  font-size: 18px; (Altere conforme sua preferência)


Pronto! Espero que tenham gostado!
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

0 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo