Para aqueles que pretendem ou gostam de personalizar seus templates, querendo ou não, é necessário ter um mínimo de conhecimento em HTML e CSS.
Ao instalar um recurso, ou fazer alguma personalização no seu blog, com
certeza alguns se deparam com determinados códigos que, muitas vezes
sequer sabem o significado ou sabem para que servem, por isso, é
fundamental saber e conhecer pelo menos o básico para entender o que se trata cada código e saber reconhecê-los.
Pensando nisso, eu já publiquei um artigo com explicações básicas sobre as Variaveis CSS e os Elementos do Blogger, onde trata a respeito dos elementos básicos do Blogger e sobre os Elementos de página.
Vou
dar continuidade a publicação de alguns artigos sobre CSS e HTML, e
tentarei repassar a vocês um pouco de conhecimento básico no assunto,
afim de auxiliá-los nas personalização de seus templates no blogger.
De antemão, já esclareço que não tenho pretensão alguma em dar aulas
sobre HTML e CSS, apenas tentarei repassar algum conhecimento básico da
maneira mais simples e acessível possível, pelo menos para que vocês
possam entender um pouquinho melhor sobre o assunto, facilitando a
aplicação de hacks e para conseguirem modificar o layout do seu blog, ou
quem sabe até, começar a criar templates.
Para aqueles que pretendem se aprofundar melhor no assunto, recomendo a leitura em alguns sites, como o do Maujor, ou o apostilando, verdadeiros mestres no assunto.
Para iniciar, vamos identificar alguns elementos no seu template.
Quando clicamos em “editar HTML” no blogger, nos deparamos com várias tags.
O início do nosso documento é HTML iniciado pela tag <html>, e se
você rolar a página até o final verá que existe uma tag de fechamento,
que é </html>.
Ao entrarmos na edição HTML no Blogger,
visualizamos qual a linguagem que está sendo utilizada na página
(XHTML), representadas por estas tags:(você não deverá mexer e nem modificar nada nesta parte)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
1. Estrutura Básica do HTML:
No Blogger, o documento HTML se compõe da seguinte estrutura básica:<html>
<head>
É entre estas tags que está contido o estilo da página – CSS.
É aqui que determinamos a aparência dos elementos
<head/>
<body>
É entre estas tags que está contida a estrutura da página (seus elementos) – HTML.
É o corpo do documento.É aqui que criamos os blocos que serão mostrados na página, como colunas, menus etc.
</body>
</html>
2. HTML e CSS:
Com certeza você já ouviu falar em CSS e em HTML, mas talvez não saiba o que significa exatamente.CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata.
É uma linguagem para estilos que define o layout de documentos HTML.
O CSS é um mecanismo para adicionar estilo, é onde controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos etc.
HTML é a abreviatura de HyperText Markup Language, é a linguagem que possibilita apresentar informações de uma página, é tudo aquilo que está contido na página.
3. CSS no Blogger:
Já vimos que o código CSS que dá estilo à página,é onde determinamos a aparência dos elementos. No Blogger, começa com :<b:skin><![CDATA[/*
e sua tag de fechamento é ]]></b:skin>.
E sempre que quisermos adicionar estilos aos elementos devemos acrescentar os códigos referentes antes de sua tag de fechamento ]]></b:skin> .
A Regra CSS segue uma linguagem própria, formando uma folha de estilos, definindo como será aplicado estilo a um ou mais elementos HTML, compondo-se de 3(três) partes:
a) Seletor
b) Propriedade
c) Valor
Na regra CSS, escreve-se o seletor e a seguir a propriedade e o valor, separados por dois pontos e entre chaves { }.
Quando tivermos que definir mais de uma propriedade, por regra, deve-se usar ponto-e-vírgula para separá-las.
Veja exemplo:
body{
background-color: $bgcolor;
}
Estas são as explicações básicas iniciais.
Na sequência, leia o artigo sobre as Variáveis Cores e Fonte(Variable Definition), que são valores que podem ser modificados no Painel “Fontes e Cores” do Blogger(pré definições de cores, fontes e tamanho de fontes).
