Não tem nada mais legal que ter um blog com nossa cara, né? Quanto mais ele for parecido com seu dono, melhor ainda! Eu, pelo menos, gosto de deixar um pouquinho de mim em cada detalhe do JDB. Nada no design do blog está lá em vão, sabem? Acho que, por menor que seja a mudança, ela reflete muito na “obra completa”.
É por isso que eu adoro trazer dicas de HTML e CSS para vocês. Quando comecei na blogosfera, os tutoriais eram bem limitados e eu tinha que me virar com o pouco que encontrava. E o pouco que aprendi e sei, eu gosto de passar para a frente para ajudar as blogueiras que querem mudar seus cantinhos mas não podem gastar em layouts ou simplesmente porque querem aprender e colocar a mão na massa.
Como muitas leitoras me perguntam como eu uso fontes diferentes nos títulos dos posts aqui no JDB, decidi compartilhar essa dica que, mesmo simples, faz toda a diferença! O legal é que o processo é bem simples e fácil, basta apenas fazer pouquíssimas alterações no código do blog. Juro!
- Antes de tudo, faça uma cópia de segurança do seu layout. Para isso, vá em Modelo e, no lado superior direito, clique em Fazer backup/Restaurar. Depois é só clicar em Fazer download do modelo completo e esperar baixar.
- Feito isso, entre no Google Fonts. Lá há uma variedade enorme de fontes diferentes e muito legais. É nesse site que pego todas as fontes que uso no código do JDB. Amo/sou Google Fonts <3
- No site, você pode fazer busca por fontes e filtrar os resultados para encontrar o estilo de fonte que você quer. Depois de escolher sua favorita, clique no quadradinho de Quick-use.
- Na página que abrir, você vai encontrar algumas informações sobre a fonte, como tempo que demora para carregar, os estilos que ela possui, etc. Porém, o que nos interessa está mais abaixo, que são os códigos que vão fazer a fonte funcionar no blog. Eles estão no item 3.
- Copie esse código e abra o Blogger. Lá, vá até Modelo > Editar HTML. Cole essa linha abaixo da tag <head>.
- DICA: Muita gente já me disse que viu esse tutorial em vários sites e blogs por aí, seguiu direitinho o passo-a-passo mas, na prática, não deu certo. Conto procês o segredo: para funcionar, essa linha precisa de uma alteração. Após o text/css’ você precisa colocar uma /, pois, sem ela, o código fica, digamos, “em aberto” e o Blogger não o reconhece. Vou fazer a alteração com a fonte que eu usei só para vocês verem a diferença, tá?
Era assim:
<link href=’http://fonts.googleapis.com/css?family=Devonshire’ rel=’stylesheet’ type=’text/css’>
Fica assim:
<link href=’http://fonts.googleapis.com/css?family=Devonshire’ rel=’stylesheet’ type=’text/css’ />
Após fazer essa alteração na linha, tudo fica certinho! Vale lembrar que esse é o código da fonte que eu estou usando como exemplo. Você tem que fazer a alteração no código da que você for usar e não copiar e colar esse acima, tá?
Agora você precisa trocar o nome da fonte no código correspondente ao local que você quer usá-la. Vou ensinar a fazer isso no título do post, mas qualquer dúvida, podem perguntar pelos comentários que eu ajudo, viu?
- No código, procure por .post h3 ou h3.post-title. Pode ser que o do seu blog seja diferente, mas geralmente é um desses dois.
- Você vai encontrar um código com mais ou menos esse formato:
h3.post-title {
font-family: Oswald;
color: #444444;
}
- Voltando à página do Google Fonts, no item 4 você verá algo assim:
- Copie o que está depois de font-family (no caso, o nome da fonte) e, de volta ao Blogger, faça a substituição. Usando o código anterior como exemplo, vai ficar assim:
h3.post-title {
font-family: ‘Devonshire’, cursive;
color: #444444;
}
DICA: confira se não tem dois ; na linha! Isso faz toda a diferença.
- Visualize e veja se mudou algo. Caso contrário, procure por .post h3 a ou h3.post-title a e repita o passo anterior.
DICA: na página da fonte no Google Fonts há várias dicas ao lado dos itens. Vale a pena dar uma #olhadinha em caso de dúvidas.
Agora quero saber de vocês: curtiram o tutorial? Conseguiram? Comentem aí! Não esqueçam que, em caso de dúvidas, é só deixá-las nos comentários que respondo aqui mesmo. Ah, e também me contem o que vocês querem aprender nos próximos tutoriais. Quem sabe a sua dica não é o próximo post do JDB? 😉
Leave a Reply to Camila Cancel reply