sábado, 14 de abril de 2012

Instalando fontes diferentes no blog


Tumblr_m2fjo5sngj1rs1kxwo1_500_large
É um tutorial super simples mais requer atenção ok? Funciona assim, através do site google web fontes você instala quantas fontes quiser em seu template (via HTML). E você pode usar em qualquer elemento que desejar, (exemplo na área dos comentários, titulo das postagens, enfim onde quiser desde que você ache os códigos de cada elemento que deseja alterar a fonte padrão)... Muuuita calma nessa hora que eu vou explicar tudo certinho no decorrer do tutorial!

1° acesse o site (www) e escolha a fonte que você mais curtiu
2° clique em QUICK-USE

3° Copie o código disponibilizado, veja:

4° para o código ser aceito no template você deverá colocar esta barrinha / antes de > Ficando assim:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/>
5° Vá no seu HTML e cole o código da sua fonte acima de </head>
Pronto a fonte foi instalada!
 Lembrando que você pode instalar quantas fontes quiser
Agora você pode aplicar a fonte em qualquer elemento que quiser é só alterar o nome das fontes padrões pelo o nome da fonte instalada. EXEMPLO:

- Quero alterar a fonte dos títulos das minhas postagens.
No meu template o código que eu preciso se apresenta como: .post h3
.post h3{
font-family: 'comic saans', arial, serif;
}
Agora é só mudar a ''font-family'' padrão do blogger pela ''font-family'' instalada (que se encontra na mesma página que você pegou o código para instalar) veja:
No meu caso então ficou assim:
.post h3{
font-family: 'Great Vibes', cursive;
}

Este foi apenas um exemplo pra vocês entenderem, ok?
Bye Bye ~~

70 Recados :

Lary Yah disse...

Como sempre, arrazando nos tutoriais Jackie!

Beeeeeeeejos

#Nhaaaaaaac >>> http://the-lovers-world.blogspot.com/

Manoela disse...

Own Amei o tuto, vou tentar.. Seu blog me surpreende e muito...


!!

Anônimo disse...

Perfeito Jackie!!
Eu ia fazer um sobre fontes (eu faço quase assim como vc explicou rs).

Adorei ♥

bjãoo

mari cute disse...

Ameii Jackie! !
Aki vc so posta coisas legais ,
Amo seu blog!!
bjs Mari

www.mundodebolinhas.com

Nicolas disse...

Oi! !Adorei seu blog! Seguindo! Se quiser da uma passada la no blog!
Um abraço!

http://dicasblogspot-db.blogspot.com.br/

Anna Carollyne Oliveira disse...

Eu já usei uma vez o site, no próximo layout irei ver se faço (:

Anna - World-cutest.tk

IzaCarrion disse...

Adorei adorei adorei tava precisando mesmo de um tutorial assim! Faz um tuto de como se instala fontes pra título da postagem, gadget (acho que é assim) e por aí vai *---*

http://hoot-and-cold.blogspot.com.br/

Natalia Sousa disse...

Muiito bom. Sempre tinha essa dúvida quando ia montar meus templates :)
--------------------------------------------
www.bugigangazdanet.blogspot.com

Anônimo disse...

ahhhh to morta de curiosidade e não encontro meu celular kkk (meu baby pegou e vai saber onde ele deixou...ai ai),quero saber oq vc escreveuuuu kkk

bjãoo

- Niyɑ disse...

Tem tag pra você no blog!
->by-jade.blogspot.com

Carol Oliveira disse...

Aprendi essa "técnica" quando fui fazer meu primeiro layout, aí usei pra trocar a fonte do título do post e dos gadgets.
Só acho que, quando a gente instala as fontes, elas deveriam ficar disponíveis no Designer de Modelo e na área de postagem também, pra gente usar quando quisesse sem ter que mexer no HTML. Mas aí era querer demais, né HAUHEUAHUEHAU :p

Pena que fontes diferentes pesam um pouco o carregamento do blog, por isso é bom a gente não abusar delas, rs.

muggle-world.blogspot.com

Sophia ♡ disse...

Adorei o tutu bem útil!Deixa sempre com cara mais bonita o blogger!Beijos *-*
O blog está de cara nova visita lá!
http://www.cotidianodeumabarbie.blogspot.com.br/

Gislaine disse...

Gostei do tutorial,eu não sabia que podia fazer isso no blog.
http://i-teenbr.net.tc

Thaís *-* disse...

Muit legal esse tuto! ;)) ja usei da um charminho coma letra arrumadinha haha ><
bonequinhadeluxo10.blogspot.com

Unknown disse...

brigada jackie, vc tb e um amor =)
adorei esse post, ja tu instalando :)

http://xicablog.blogspot.pt/

Unknown disse...

*estou

Giulia disse...

Amei Jackie! Muito obrigada,eu tavo precisando muito! :k:

Marcinha disse...

Muito bom esse tutorial, adorei!!!
Bjinhos

www.jeitinhofemininoblog.com

Mandy disse...

Ótimo tutorial como sempre Jackie!

*---*

Bom domingo!

BjO
http://the-sook.blogspot.com.br/

Klara :3 disse...

Ah mais não achei o código :i:
Depois vou tentar com mais calma
Uma semana ótima pra ti!
Bjão, fica com papai do céu ;*

Garota Imperfeita

Anônimo disse...

meu comentario não tem nada relacionada o post
acima!
gostaria de pedir sera que poderia posta dicas site hospedagem de arquivos

Giulia Pessoz disse...

:j: eu fiz! Ficou ótimo! Obrigada.
www.batomdeframboesa.blogspot.com

Unknown disse...

heey jackie, quando eu enviar o meu modelo vc tb pode compor outra coisa? -eu tenho google chrome e internet explorer- meu plano de fundo de mensagens ficou transparente e eu já tentei mudar para branco mas aquilo nao mudou. obrigada pela oferta de ajuda, claro que aceito!
diga-me o seu e-mail para lhe enviar.

http://xicablog.blogspot.pt/

Unknown disse...

Oi linda tudo bem?
Adorei o seu blog estou seguindo:l:

Unknown disse...

Jackie , me tire uma duvida ... Como Faço pra Deixaro titulo do post Maior , Ja usei o Editor , & fui pelo html e nada ,
A outra questão é ( tem como tirar o efeito dos marcadores ( eu não achei legal nele ) ! beeiijãoo

www.girllsweett.blogspot.com.br

Unknown disse...

Obrigada Jackie , me salvoou s2'

Beeiijinhus!

My Diary disse...

:i:

eu estou muito sem graça ,mas gostaria de te perguntar se você não podia fazer um layout mais ou menos pro meu blog pf me responde

email:diariodeumagarotacomum@gmail.com

www.simplesmenteraphaella.blogspot.com

Bruna disse...

Como coloca as fontes novas nas postagens ?

Passa lá no meu blog http://forgirls09.blogspot.com.br/

Maria Eduarda // Blog Mundo Teen disse...

:k: adooreei ! www.mundooteens2.blogspot.com.br

Anônimo disse...

Oi Jackie , tentei um dia inteirinho por uma fonte no blogguer e não consegui de jeito nenhum , a fonte que eu quero estalar é um pouco diferente dessa que vc tem , ela tem duas aspas

já tô deseperada se puder me ajuda? http://licia-carla.blogspot.com.br/ bjs

debutantes disse...

Ai que bom que me respondeu , é assim estou editando um lay pra uma amiga minha , ela tem um blog de makes , achei que a fonte dancing é a cara do blog que tô fazendo (que por acaso estou usando uma base que achei no jd ok?) mas já tentei de todas as formas por a fonte e não consegui , estou fazendo em um blog de testes .


sobre essa .post h3 , não acho no template de jeito nenhum!!! Eu quero por essa fonte nos títulos de posts e de gadgets (eu falo pra caramba né?) se puder me ajudar , nem sei como agradecer bjs

Bibi disse...

Consegui na boa!!! Vê as maravilhas dos meus blogs:
docas-games.blogspot.com
danilubi.blogspot.com
bibis-m-o.blogspot.com
sala-destudo.blogspot.com

Bibi disse...

Consegui na boa!!! Vê as maravilhas dos meus blogs:
docas-games.blogspot.com
danilubi.blogspot.com
bibis-m-o.blogspot.com
sala-destudo.blogspot.com

Madu disse...

Nao deu certo, ficou horrivel.

BLOGS // Vaah disse...

Consegui, como sempre arrazando nos tutoriais, um beijo e ótimo dia pra voce lindona;

Dá uma olhadinha :
http://nosnopc.blogspot.com

Bjuuuuus !

FC LUAN SANTANA UM BEIJO SP disse...

Oiie Td Bem , Como Que Vc Coloca Esssas Menininhas ↑ ai emcima , para as pessoas colocarem nos comentarios tipo ( :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:)beijo e ótimo dia pra voce lindona;

jaqueline disse...

@FC LUAN SANTANA UM BEIJO SPhttp://isjackiezzdream.blogspot.com.br/2011/08/cute-emoticons-nos-comentarios.html

Anônimo disse...

Eu consegui, mas á letra ficou MINÚSCULA!!! Como aumenta???

jaqueline disse...

@Anônimo perto da área que vc mudou a fonte procure algo como

font-size: 26px;

ai vc só modifica o número!

p.s coloquei um numero exemplo ai, provavelmente será outro (:

Anônimo disse...

Adoreei! Tô usando Ei, sabia que esse seu tutorial foi o primeiro a aparecer no google pra mim? Parabéens ahhaha
Beijos,
--> siimsenhorita.tk

jaqueline disse...

@ana b | :j:

♔ Ana Carolina ϟ disse...

:e: Me ajuda Jackie hauss como faço pra saber qual o nome daquele negócio que no seu é .post h3 ?

ahusahs

http://cuteland-oficial.blogspot.com.br

♔ Ana Carolina ϟ disse...

Oi Jackie, me ajuda?

Tipo, minha fonte é essa:
font-family: 'Spirax', cursive;

Onde eu colo? Me ajuda pf..

http://cuteland-oficial.blogspot.com.br/

Malu disse...

Onde fica o código?Nao achei...
:i:
Bjos
vida - de - cupcake. blogspot. com
*tire os espacos*

jaqueline disse...

q código?

Anônimo disse...

:i: Jack eu não consegui.

Julinha Rosa disse...

ameii o tutu mais não consegui :(

:l:

diquinhasdajulinha.blogspot.com

Carol disse...

Eu fiz tudo direitinho mas não deu :n:

Jade Lencina disse...

Err, Jackie, tô com um probleminha... Tipo, eu usei um tutorial, acho que daqui mesmo, para personalizar o título dos gadgets. Daí, acima de já tem uma url de uma fonte do google/webfonts. Então, quando eu coloco, nada é alterado ._. Socorro!
-> dreams-in-vain.blogspot.com.br ( está em construção, não repara)
Beijos!

Bruniele disse...

Fiz isso no meu blog coloquei no font-family abaixo do bg. Daí a fonte do titulo dos posts e do post por completo e da sidebar tbm mudaram!!!! Socorrr não era p/ muda a da postagem e da sidebar !!! HElPPP

jaqueline disse...

@Bruniele É só retirar o código (:

Juh disse...

Perfeito :k:

oficinnacriativa disse...

super legal este post, bem explicadinho :)

Little Bee disse...

o meu ficou com a fonte minúscula, seria ideal se a Jackie pudesse ensinar como aumentar a fonte. No meu ficou horrível, vou ter que me contentar com as fontes do Blogger mesmo.

jaqueline disse...

guria pra aumentar a fonte é só achar perto do código que vc alterou a fonte algo como:

font-size: 45px;

daí vc só altera o número

não coloquei no tutorial pq é algo muito simples que não tinha necessidade :c

Aline Conceição disse...

Jackie me ajuda,num intendo o google web fonts não quer abrir de jeito nenhum,e a única forma é por aii,o site não abrii,me ajuda por favor!
Queriia então te colocar como administradora só pra fazer isso pra mim :/
responde:simples-garotaa.blogspot.com

jaqueline disse...

O site tá abrindo normal aqui ? '-'

Aline Conceição disse...

Acho que é algum problema no meu pc,vou
tentar fazer isso em outro computador,obrigado mesmo
assim.

Unknown disse...

o meu no encontra o .post h3{
como faço?

jaqueline disse...

Era só um exemplo!

Você tem que encontrar os lugares que quer modificar as fontes do seu blog entendeu?

Marina Santos disse...

Passem no meu blog! http://dicasdecds.blogspot.com.br/

Unknown disse...

Muuuito bom!

Unknown disse...

ameii o tutorial *-*

Oxente Mulezinha Ltda disse...

ai, ai...vou tentar...

GABES disse...

Oi Jackie, eu fiz exatamente o que você explicou tudo perfeitamente, e não mudou nada :( e essa não é a primeira vez. Da uma olhadinha no meu blog, eu nem tirei o código!

http://wrosachoque.blogspot.com

Unknown disse...

Deu certo, obrigada *-*
www.amoraoprimeirorimel.blogspot.com

Cibele Lima disse...

Por favor, você pode me ajudar? Eu instalei, mas na postagem principal não consigo fazer aparecer, só quando clica no título dela na outra página aparece...porque será??
dá uma olhada, www.vivaverdevivabem.blogspot.com
obrigada bjo

jaqueline disse...

segue esse tutorial aqui>>http://isjackiezzdream.blogspot.com.br/2012/08/personalizando-o-titulo-das-postagens.html

Brenda Carvalho disse...

Olá! Como vocês colocou a imagem de fundo somente no topo do blog?

jaqueline disse...

Então, usei um tutorial do Trechy teen que está fechado no momento.
Logo que abrir mando aqui pra vc ;D

Postar um comentário