Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

01 setembro 2008

Como fazer um template para o Blogger - Parte II

Variáveis do tipo Font
Continuando a série, vamos ver agora a criação de variáveis do tipo font. Ao analisarmos o código do nosso blog de testes, podemos ver:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Antes de alterarmos as fontes que se apresentam nas variáveis, é preciso entender primeiro alguns conceitos básicos:

Uma fonte qualquer só é visível se o navegador reconhece esta font, ou seja, é necessário que o leitor tenha esta font gravada em seu computador, caso contrário não irá vê-la. Existe uma infinidade de fontes das mais variadas, porém, não são muitas as que são comuns à todos os usuários. O que devemos fazer é estabelecer uma lista de fontes que podem ser reconhecidas pela maioria dos navegadores, separando-as por vírgulas e obedecendo a regra:
Fontes com nomes duplos precisam vir entre aspas, ex: "Trebuchet MS";
O navegador exibirá ao leitor a primeira fonte que ele reconhecer de uma lista.
Toda lista deve terminar com uma fonte genérica (serif, sans-serif, monospace, cursive e fantasy.) Você pode conferir os tipos de fontes genéricas clicando aqui.
Voltando a nossa variável bodyfont:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
tal qual as variáveis color, precisamos respeitar a sintaxe que se apresenta para a criação de uma variável do tipo font: nome da variável sem espaços, descrição da variável, valores para default e os valores que desejamos aplicar à propriedde fonte. Vamos analisar separadamente o trecho que nos interessa:
value="normal normal 100% Georgia, Serif">
Neste primeiro normal estabelecemos o estilo da fonte (font-style), que pode ser normal, italic e oblique. No segundo normal estabelecemos o quão escura será esta fonte (font-weight) e o valores possíveis são esses:
  1. normal
  2. bold
  3. bolder
  4. lighter
  5. 100
  6. 200
  7. 300
  8. 400
  9. 500
  10. 600
  11. 700
  12. 800
  13. 900
ou seja, se desejamos, neste caso, que a fonte do texto de nossa página se apresente em negrito e no estilo italic, devemos colocar:
value="italic bold 100% Georgia, Serif">
Faça a modificação e clique em visualizar. Deve ficar assim:
aula7
value="italic bold 100% Georgia, Serif">
100% refere-se ao tamanho da fonte, que também pode ser estabelecido em pixels. Georgia é o nome da fonte escolhida para a página e Serif a fonte genérica (fontes normais com serifa). No caso de algum navegador não reconhecer a fonte Georgia, automaticamente irá buscar uma fonte da familia Serif para mostrar ao leitor.
Vamos ver a variável headerfont que se apresenta no código do seu template:
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que aqui várias fontes foram listadas e devem ser apresentadas na ordem em que estão; ou seja, se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
As variáveis do tipo font no template Mínima são bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont. Vamos criar uma nova variável do tipo font, para exercitar:
<Variable name="sidebartitlefont" description="Titulo da Sidebar"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 100% 'Palatino Linotype', 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que criei a variável sidebartitlefont com a seguinte descrição: 'Título da Sidebar' e estabeleci que a letra será normal e em negrito, tamanho 100% e que a primeira font a ser procurada pelo navegador deverá ser a Palatino Linotype (note, está entre aspas), e na falta dela, Trebuchet MS e assim por diante.
Vamos agora colocar esta variável no titulo da sidebar.
No template mínima não existe a regra css para o título da sidebar. Ela está genericamente definida na propriedade h2 para todos os seletores. O que vou fazer é dar valores diferentes para a propriedade h2 do seletor Sidebar, criando a regra:
.sidebar h2{
font: $sidebartitlefont; }
Coloque este trecho no código do seu template, junto às outras regras para sidebar, para facilitar a busca posteriormente.
aula8
Salve as modificações e visualize (se já tiver inserido algum elemento na sidebar, logicamente), e veja a variável em ação.
Você pode criar quantas variáveis do tipo fonte que desejar mas eu particularmente não costumo nem usá-las em meus templates e blogs. Prefiro definir os valores diretamente na regra css para cada seletor, desta maneira:
.sidebar h2{
font-size: 100%;
font-weight: normal;
font-family: 'Palatino Linotype', 'Trebuchet MS', Sans-Serif;
color: #000000;
}
Todos os valores possíveis para a propriedade font, bem como a ordem em que devem ser apresentados, podem ser conferidos aqui.
Como lição de casa :-) se utilize das informações sobre os valores da propriedade fonte para modificar o titulo da sidebar, sem se utilizar de variáveis. Faça como neste último exemplo, alterando o tamanho, cor, estilo e tipos de fontes. Não tenha receio de tentar: enquanto não se clica em salvar, você pode apagar o que fez quantas vezes desejar, clicando em Limpar Edições. Teste todos os valores apresentados na página do Maujor, para ir conhecendo e se familiarizando com cada um.

Artigos Relacionados

15 comentários:

humornainformatica disse...

Parabéns pela iniciativa de fazer essa série de tutoriais! Um dia ainda crio coragem (e paciência) para fazer um template exclusivo... e com certeza vou ter que dar uma pesquisada por aqui!

PDV Ativo disse...

sera que vc pode me ajudar ....os icones abaixo das postagem ...aqueles de comentarios estao na vertical .....por favor como posso deixa-los na horizontal.....desde ja agradeço

XuxuBoy disse...

Olááá! Ariane, escutei sua entrevista, muito muito boaaa! escutei já duas vezes :)
e a Senhora ou "você" como preferir ^^
...então eu vim aqui pedir sua ajuda /;
se puder me ajuda...eu procuro e reviro os sites e blogs, inclusive mto o seu, só ke msm que eu mexa e revire TUDO eu nao tenho facilidade como ganha dimdim com clikes (o.O)
se vc pudesse me ajudar, me dar umas dicas assim onde eu colokar a publicidade eu fikaria mto grato =D obrigado pela atenção :)
beijooooooo!!!

Isaque Lima disse...

Olá Ariane te conheci atravez
do podcast no "dicasblogger"
adorei o seu carisma!derepente
se quiser me visitar é só passar la
no http://sondnews.blogspot.com/
estarei a seus dispor,amei o blog a dica tb,rsrs

Brasfoot disse...

ola Ariane
tudo bem?
gostaria de pedir a vc uma ajudinha
preciso de dicas de como divulgar melhor meu blog. Vi que seu blog é bem conhecido, e queria saber como faço isso. Se tiver dicas pra me dar
me mande a resposta aqui mesmo ou em forma de cometário no meu blog
>>sagadigital.blogspot.com<<

obrigado

Encantada Presentes disse...

Oi Ariane, tudo bem? Primeiramente quero parabenizá-la pelo seu blog e pela iniciativa.
Estou com um probleminha... eu criei um template para mim, porém não consigo salvar no BLOGGER.. sempre aparece erro e não consigo achar.
Eles informam o seguinte:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The markup in the document following the root element must be well-formed.

Quando não é essa é outra... não sei mais o que faço pra eles "aceitarem" meu código.

Gostaria de saber sua opinião e se puder me ajudar agradeço muito, desde já. Meu e-mail é marianaalencar@gmail.com

iara-alencar disse...

Dona ariane esqueceu de tagear esse post, aí eu pulei da parte 1 para a parte 3 rsrsrs
Sem entender do que voce falava de variáveis.

Ariane disse...

foi mesmo Iara!! rsr Obrigada pelo toque! :-)

all-free disse...

Oi gente, eu gosto muito de usar meus bllogs...
mas eu queria uma template como a do http://downgratis.com

eu quero uma template do mesmo estilo, mas não dou conta de fazer...
Como faço?
Deem uma olhada no site por favor e me avisem??

Obrigado!!!

stallone.com.br disse...

Conheci seu blog através do Dicas Blogger. Com o template da Juliana + estes tutoriais, meu blog vai ficar 1000!
Agradeço as dicas e continue assim ...
Pra quem quer ver o que é possivel fazer é só visitar:
http://www.stallone.com.br/

Leandrw disse...

Bravo! Bravo! Bravíssimo!!!

Pedro disse...

ariane eu adoro seu blog!
sempre que posso dou uma passada pra ver os templates ;)

beijos ;*

♥ Bruh ♥ disse...

mto bom essa sessão do blog meuss parabenss pela iniciativa

Priscila Rodrigues disse...

Vc é o cara.. rs.

Estou fazendo um do jeito que eu quero, logo mais, quando estiver pronto (com sua ajuda) coloco o "meu template" no meu blog.

Valeu.. Beijos.

Diogenes disse...

Ótimo post, entendi quase tudo o que ta faltando e saber onde colocar e quais códigos colocar.

Postar um comentário

Os comentários são moderados.