Olá queridos leitores, hoje daremos mais continuidade à nossa série, Aprendendo HTML e CSS. Hoje iremos aprender sobre as Definições Variáveis ou Variable Definitions, é ela que determina quais elementos podem ou não ser personalizados no Designer do Modelo, a ferramenta do Blogger. Ela já vem automaticamente em templates nativos do Blogger e em alguns casos, em templates criados por terceiros.
Variável cor:
<Variable name="fundocolor"description="Page Background Color"type="color" default="#fff" value="#ffffff">
Em vermelho: é o nome da variável - pode ser qualquer nome que você quiser escolher, mas não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores.
Em verde: é tipo de variável, que neste caso é cor.
Em rosa: é o valor padrão, funciona na falta de um outro valor fornecido.
Em amarelo: é o valor da cor fornecida.
Variável fonte:
<Variable name="bodyfonte"description="Text Font"type="font" default="normal normal 100% Georgia, Serif"value="normal normal 100% Georgia,Serif">
Em vermelho: é o nome da variável, sem espaços.
Em azul: é a descrição da variável.
Em verde: é o tipo da variável, que neste caso é font.
Em rosa: é a fonte padrão.
Em laranja: é a fonte escolhida.
 |
| Clique na imagem para ampliar |
Como criar variáveis tipos de cor:
Em muitos casos de criação de template, o usuário do template tem que se sentir confortavél mesm se ele souber "mexer" com HTML, mas para isso, antes de criar seu template, instale as Variable Definitions.
O código para inicialização dos variáveis é:
/* Variable definitions
====================
<variable name="NOME"description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">
Exemplo:
<Variable name="linecolor" description="Linhas" type="color"default="#599"value="#6F0599">
Para que as variáveis funcione, deverá colocar no elemento o símbolo $ e o nome(<variable name="NOME").
Lembre-se! A variável apresentada acima(mostrada como exemplo) pode ser utilizada em qualquer propriedade, não apenas em linhas.
Caso eu queira, por exemplo, colocar esta variável como background da sidebar, deverei fazer assim:
.sidebar {
background-color:$linecolor;
}
Perceba que o que falei anteriomente, precisa inserir o símbolo $ para funcionar, a parte em destaque(negrito) faz com que a cor de fundo da sidebar seja aplicada pelo Designer do Modelo.
Agora que você determinou a variável, Salve seu HTML e acesse o Modelo > Personalizar > Avançado. Não se confunda, pois estou indicando os paços para ir ao Designer do Modelo.
Perceba que há vários tipos de variáveis que irão ser personalizadas. No meu, há inúmeras. Veja a imagem abaixo:
 |
| Clique na imagem para ampliar |
Como criar variáveis tipos de fontes:
Também podemos criar, além de cores, as variáveis de fonte, seguindo quase os mesmos passos da criação de cor. Em alguns templates Minima, as variáveis de fonte são indicadas assim: bodyfont, headerfont, pagetitlefont, entre as outras.
Uma variável de fonte do rodapé do blog(footer) se escreve deste modo:
<Variable name="footertitlefont" description="Footer Title Font" type="font" default="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif" value="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif">
Perceba bem que a primeira letra(no caso Arial) será a primeira a ser procurada pelo navegador, na sua falta será substituída pelo navegador pela fonte Verdana, e assim por diante.
Procurando o elemento desejado, coloca-se novamente o símbolo $ antes do nome da fonte, veja o caso do footer:
.footer h2{font: $footertitlefont;}
Após de determinar a nova variável, segue o mesmos paços. Salve o HTML e vá para, Modelo > Personalizar > Avançado, lembrando que os passos são para ir ao Designer do Modelo.
 |
| Clique na imagem para ampliar |
Perceba que na aba de Data do post você personalizará a fonte desejada, depois de indicar que ela será personalizada pelo Designer do Modelo.
É isso e até a próxima!
É isso e até a próxima!
Postagens Relacionadas:
Postar um comentário