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).

18 fevereiro 2008

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.

Artigos Relacionados

14 comentários:

Ricardo Rayol disse...

se eu te disser que estava quebrando a cabeça com essas bostas hoje vc acredita????

Onde tem um roteiro com os nomes das variaveis e o que fazem?

Ariane disse...

ricardo, então foi um 'transmimento de pensação'... :-)

Já existem algumas variáveis em todos os templates, logo no topo dos códigos. A partir daí vc pode criar outras tantas que desejar. Tô aqui quebrando a cabeça tentando fazer um video mostrando como...

Kika Honeycutt disse...

... O.O ...

Perfeito! Eu estava hj mais cedo arrumando os códigos pra começar a ver o que cada um faz e quando vi as variáveis a primeira coisa que me passou foi: "Tá, deixa pra daqui a pouco ou amanhã -ou quem sabe mais no meio da semana... Daí vejo com calma o que é cada uma."

Sua explicação ajudou bastante.
Obrigada. ^___^

Rô Rezende disse...

Eu criei um post sobre esse assunto esses dias, mas achei que não ia ser útil para ninguém. Pelos comentários aqui pude ver que sim, fico feliz que talvez ajude alguém.

Sagesse disse...

Ariane, estou com um probleminha e gostaria de sua ajudar, se vc souber o q posso fazer:

Iniciei meu blog com uma conta gmail, depois passei para um e-mail yahoo e agora, a partir deste e-mail do yahoo, fiz uma conta do gmail. Acontece que mesmo assim meu blog não ficou do tipo Novo Blogger. E eu queria instalar um template seu para blogger beta - Outuno - nele.

O que posso fazer?

Muito obrigada.

Ariane disse...

rô, quanto mais gente ensinando, melhor ;-) Seu blog é muito bom!


sagesse, não tenho 100% de certeza mas me parece que agora para criar um blog no Blogger é obrigado a ter uma conta de e-mail no Google aí automaticamente vc terá a nova versão.

Elias disse...

Corrigindo erros:
No começo do post você disse "Mas, o que são estas variáveis? São 'comandos' CSS que permitem a troca de fontes e cores do seu template à partir do painel do Blogger:" Variavel é bem mais complexo que isso, não vou explicar aqui, mas pergunte para qualquer WebDesign que ele te explica direitinho=D
Para criar uma váriavel é simples:
Variable name="NOME DA VARIAVEL" description="VARIAVEL DO POST"
type="(no caso do css geralmente aqui vai ou text ou color)"
default="(o código da cor ou da fonte" value="só no caso dá variavel ser da cor de algo, aqui você coloca a cor de novo"

Depois é só chamar ela aonde você quiser no código pelo nome dela;)

Ariane disse...

elias, a intenção deste post não é a de dar uma aula de css. A intenção clara deste blog é transmitir de maneira simples e em linguagem acessível, meios de compreender alguns dos códigos encontrados nos templates do Blogger. E como nunca me apresentei como WebDesign (e sim 'xereta'), agradeço qualquer contribuição que os mesmos possam me oferecer. Por isso, sinta-se à vontade para se aprofundar em qualquer explicação, se assim achar necessário.

um abraço

Unknown disse...

Ariane, lá vou eu te encher de novo...

Seguinte: Tô tentando colocar mais de um estilo de link no blog e não tô conseguindo.. Mesmo seguindo vários tutoriais que encontrei pela net afora estou esbarrando na minha ignorância no assunto...

Eu quero colocar os links dos post de uma cor e os links do resto do blog de outra cor. Toda vez que eu tento acabo por deixar todos os links igauis, inclusive o link do título do post... Tá um saco isso...

Enfim.. eu quero que os links SOMENTE do corpo do post fiquem assim:

a:link {
color:$linkcolor;
text-decoration:none;
background: #e6e6e6;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
background: #e6e6e6;
}
a:hover {
color:$titlecolor;
text-decoration:underline overline;
background: #e6e6e6;
}

Os do resto do blog quero deixar com as mesmas cores, mas sem o background. Tô quebrando a cabeça aqui e não consigo. Você pode me dar uma mãozinha?

Beijos

Zaka disse...

Olá!!!
Só pra registrar que achei o teu blog mto, mto legal mesmo, eu tava procurando esses tutos sobre criação de templates há um tempão e nunca achava, só hj achei e diga-se de passagem, estou muito grato por isso.
Parabéns!!!

=]

Eric123 disse...

olá,Eu tenho uma duvida, quando eu tento muda as cores la no layontes>fontes e cores, nao inporta que cor eu queira colocar ela nao muda tem com oresolve isso ?

Bruninha Educadora! disse...

hum vou tentar pela milesima vez!!rsrs

Ḁʯɍεℓȋѻ ϻ. Ͼ. Ɠסּɱҿʂ ® disse...

Olá não sou muito experiente em html, estava querendo saber se é possivel colocar cada postagem no Blogspot com um background individual,ou seja gostaria de colocar uma imagem diferente como plano de fundo em cada postagem, pesquisei bastante e não encontrei nada.

atenciosamente

"Blog Do Aurelio "Sou o Mensageiro!""

Bel disse...

Menina vc é 10 de vez em quando dou uma de louca mexendo no meu blog e achei as variáreis meio camplicadas, não entendi esse default, Desde já agradeço sua explicação bjs. Amo seu blg.

Postar um comentário

Os comentários são moderados.