10 de mar de 2011

Como colocar fontes diferentes no Blogger

Para quem prefere continuar com o modelo antigo do blog, vale a sugestão. Para colocar um modelo de fontes (letras) diferentes no Blogger, acesse a página http://www.google.com/webfonts, assim que escolher a fonte de seu agrado, clique então sobre a fonte, como mostra a imagem abaixo. Veja a DEMO




Agora, clique em : "Use this font"




Copie então o primeiro código como mostra a imagem.




O código será assim:


<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:  se isso não for feito o Blogger não aceitará o código. 





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 as letras diferentes:


Procure por:

.sidebar h2 {


Cole então o código abaixo dele



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



Procure por:

.post h3 {

Cole então o código abaixo dele


Para que o título do blog


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 o texto do blog



Procure por:

.post {

E  abaixo dele cole o código.

  • Para aumentar o tamanho da fonte, cole o seguinte código:

font-size: 18px;



13 comentários:

  1. Vlw pela dica, funciona perfeitamente xD

    ResponderExcluir
  2. Oi! Muito Obrigada pela ajuda!! tava louca procurando .. funcionou corretamente ^^

    ResponderExcluir
  3. Vale pra quem usa o modelo atual do blogger?

    ResponderExcluir
  4. Eu devo ser uma anta quadrada pra caralho pq eu não concegui não d pra faser uma verssão pra quem é nub como eu não ? ++

    ResponderExcluir
  5. e como coloca no titulos dos gadgets?

    ResponderExcluir
  6. Excelente tutorial, deu certinho! Valeu!

    ResponderExcluir
  7. Gente eu acabei de testar no meu blog de teste e deu super certo!
    Vl...Bjoos!

    ResponderExcluir
  8. nao consigo achar os codigos correspondentes :(

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube