Variáveis: entenda o que são e aprenda a criar uma

Se você der uma olhada nos códigos do seu template, a primeira coisa que irá encontrar são as Variáveis que se apresentam da seguinte forma:


Mas, o que são estas variáveis?

O que são variáveis - Gente, uma forma fácil de explicar o que são variáveis é fazer você lembrar daquelas aulas de matemática, onde seu professor obrigava você a descobrir o valor de "X" de "Y" e outras letras do alfabeto, e muitas vezes até palavras.

Pois essas letras nada mais são do que variáveis, ou seja, letras que armazenam valores. Assim, é uma variável um recipiente capaz de armazenar valores temporariamente. Encontramos variáveis de memória em praticamente todas as linguagens de programação.
Fonte: Paulo Teixeira/MXStudio

A utilização das variáveis permitem as mudanças de fontes e cores no painel do Blogger.


A coisa funciona, na prática assim: você cria uma variável e coloca ela onde deseja comandar as mudanças de cores/fontes através do painel. Por exemplo a variável bgcolor, que é encontrada na maioria dos templates:

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#ffffff" value="#ffffff">

A fórmula de criação de uma variável para cor é esta: você cria um nome para a variável, uma descrição (que aparecerá no painel de controle), um valor para default (default é o valor que o sistema adotará automaticamente na falta de qualquer outro valor estipulado. Eu deixo sempre os valores iguais) e o valor da cor que se deseja (em HTML). Este comando estará ativo quando colocado diante de qualquer especificação em qualquer parte do template, ou seja:

#Outer-Wrapper{
background: $bgcolor;}

o que significa que a Outer-Wrapper do seu template irá obedecer aos comandos para Page Background Color no Painel do Blogger. Toda vez que você alterar a cor relacionada a esta descrição, a cor do background de Outer-Wrapper irá mudar. Para que funcione a variável você deve colocar o símbolo $ antes da variável e terminar com ; ou ela não funcionará:

$bgcolor;

Um mesmo comando pode ser usado mais de uma vez no template sem problema algum. Por exemplo, se você deseja que a cor do fundo da barra lateral acompanhe sempre a cor do fundo do blog, é só utilizar a mesma variável nos dois casos:

body{
background: $bgcolor;}

#sidebar-wrapper{
background: $bgcolor;}

Assim, toda vez que você modificar a cor da variável cuja descrição no Painel é Page Background Color, tanto a cor do fundo da página quanto da Sidebar serão as mesmas.

Você pode criar quantas variáveis desejar, para background, links e titulos:

<Variable name="linkcolor" description="Link Color"
type="color" default="#2F96B9" value="#660000">

Aqui está estipulada a variável para os links da página e todos os links acompanharão o mesmo valor de cor estipulados no painel. Mas, se você desejar que os links da Sidebar, por exemplo, sejam de uma cor diferente dos links do restante do template, basta criar uma variávels nova:

<Variable name='linksidebarcolor' description='Link Sidebar Color' type="color" default="#2F96B9" value="#660000">

Após criar a nova variável, coloque-a no local correspondente do template onde se deseja que ela atue, no caso, nas links da sidebar:

.sidebar a:link{
color: $linksidebarcolor;}

Se no seu template já não existe esta especificação para os links da sidebar, é só copiar como coloquei acima e colocar dentro do trecho que se refere aos detalhes da sua sidebar, geralmente assim:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.6em;
margin:0px;
text-align: right;
}

Ficando assim:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.6em;
margin:0px;
text-align: right;
}

.sidebar a:link{
color: $linksidebarcolor}

Agora podemos criar uma variável que atue sobre o background do título da Sidebar:

<Variable name="titlesidebarbgcolor" description="Link Title Sidebar Bg Color"
type="color" default="#2F96B9" value="#660000">

E usar no campo especificado para o titulo da Sidebar, que é .sidebar h2:

.sidebar h2 {
background: $titlesidebarbgcolor;
text-align: left;
text-decoration:none;
}

As Variáveis para Fonte:

Se apresentam desta forma:

<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 85% Georgia, Times, serif">

Aqui, como no caso de Color, é preciso dar um nome à variável e uma descrição, além de estipular um valor qualquer para o tamanho da fonte fonte, no caso aqui representado 85% (que depois poderá ser alterada no painel), assim como os tipos de fonte que poderão ser utilizadas. Geralmente utiliza-se fontes padrões, que já estão incluídas em qualquer sistema operacional. Se você estipular uma fonte diferente e ela não fizer parte dos pacotes de Fontes básicas que existem em todos os computadores, só os que possuem a tal fonte poderão vê-la. Ou seja, se você estipular a fonte Paladino para o cabeçalho, só quem tem esta fonte gravada no computador irá vê-la, os outros verão apenas as fontes padrões que se segue à fonte principal, estipulada ente aspas.

Aqui neste caso podemos criar quantas variáveis desejarmos, podendo assim diferenciar os tipos e tamanhos de fontes em partes distintas do template. Você pode criar uma variável que será usada somente nos textos da sidebar ou no rodapé da página, por exemplo:

<Variable name="sidebartextfont" description="Sidebar Text Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 85% Georgia, Times, serif">

Aqui foi criada uma variável somente para os textos da Sidebar, que devem ser colocadas no local indicado no template:

.sidebar {
color: $sidebartextcolor;
font: $sidebartextfont;
line-height: 1.6em;
margin:0px;
text-align: right;
}

A criação de diversas variáveis facilita muito as mudanças no seu template sem que seja necessário mexer com os códigos cada vez que se deseja mudar uma cor ou tamanho de fonte.

Para quem deseja criar templates para distribuição o segredo é criar tantas variáveis possíveis para que o usuário do Template tenha uma liberdade maior para fazer suas alterações sem ficar perdido com os códigos.

Edit: vale dar uma olhada no Help do Blogger sobre o assunto

Edit2: O início da postagem, onde definia o que são as variáveis, foi modificado. Muitas vezes eu sei fazer mas não sei explicar corretamente nem me utilizar dos termos corretos para definir conceitos. Por isso, e por que minha atenção foi chamada por um leitor que me alertou sobre o conceito de varável ser muito mais abrangente do que eu havia explicado, decidí fazer uma pesquisa e encontrei em outro site uma explicação muito boa para o que são as variáveis. Coloquei aqui o trecho que interessa com os devidos créditos ao autor.