Íntegra Studio - Web Design: Personalizando qualquer parte do blog #1

Fala galera! Essa é a primeira parte da série vencedora da enquete. Nela, vou ensiná-los o principal para você próprio personalizar qualquer parte de seu blogger, tendo assim um template do seu jeito.
Pretendo dividir ela em 4 módulos:

Como funcionam os códigos do blogger
CSS básico
Estilizando qualquer parte do template
CSS avançado

Você não precisa seguir a risca essa ordem para se dar bem com os tutorias, principalmente se você já souber bem sobre CSS e XHTML...mas eu recomendo que pelo menos leia todos eles.

Vamos lá?

1 - O código fonte do blogger

Primeiramente precisamos entender como os códigos da plataforma são estruturados. Os templates do blogger são desenvolvidos em XHTML e XML, quase idêntico com o HTML comum.

Você pode ver o código-fonte de seu blog indo em Modelo>>Editar HTML. Às vezes, o blogger "esconde" umas partes do código para facilitar a edição, você perceberá isso quando aparecerem setinhas pretas ao lado do número da linha. Elas indicam que há um bloco de código no lugar daquela linha.

Obviamente, o arquivo é divido como em um HTML comum: <html>, <head>, <body>. No <head> se encontram as meta tags, alguns scripts e - onde quero chegar - o código CSS.

O CSS (responsável por dar estilo aos elementos), se encontra principalmente em dois lugares no nosso código:

Entre <b:skin> e </b:skin> - Aqui vão os estilos em geral de todo blog (onde vamos mexer mais)
Entre <b:template-skin> e </b:template-skin> - Aqui vão os códigos mais relacionados a estrutura em si dos elementos, como posicionamento e margens (não precisamos mexer tanto)

Ainda há uma parte do código que se referem as variáveis do modelo. Elas são utilizadas no CSS para facilitar o desenvolvimento. Exemplo:

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>

Dentro de <body> (o corpo da página), você encontra muuuitas divs, que são os elementos em que se divide o blog. E entre essas divs, podem existir as tags nativas do blogger, reconhecidas por começarem sempre com "<b: " .

2 - Tags de elementos do Blogger

An!? Calma, agora vou explicar o que são esses tais códigos.

São elas que fazem seu blog ser um site personalizável e dinâmico. Ou seja, elas que permitem que você adicione gadgets e postagens de uma forma gráfica (ou não).

Estas são as principais tags:

<b:section> - São elas que delimitam as áreas que receberam os widgets(gadgets). Elas estão presentes por exemplo nas barras laterais, no cabeçalho, no rodapé etc.
<b:widget> - Esses são os widgets em si. São divididos em tipos, nomes, ids, além de outros.
<b:includable> e <b:loop> - São as que compõem os widgets, criando loops ou repartições.
<b:if> e <b:else/> - São elas que fazem as tomadas de decisão do código (Se / Senão).

Exemplos:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> <b:widget id="header" type='HeaderView' locked="yes"/> </b:section>

<b:includable id='main'> <b:loop var='i' values='posts'> <b:include name='post' data='i'/> </b:loop></b:includable>
<b:includable id='post' var='p'> Title: <data:p.title/></b:includable>

Se você quiser se aprofundar nessa parte mais avançada, leia a própria documentação do Blogger.

3 - Conclusão

Não, amigo. Todo esse papo não foi perda de tempo não...Queria apenas fazer uma introdução para você entender bem o que vou falar agora.

Você já deve ter percebido que seu template é composto por muuuitas divs, sections, widgets etc. E que quase todos eles tem um nome que o referencia (veremos mais pra frente que podem ser ids ou classes). Nosso grande desafio ao tentar personalizar um blog, é saber qual desses elementos devemos estilizar e quais propriedades devemos atribuir para que tudo saia como desejarmos.

E assim termino a primeira aula da #ÍntergaSerie "Personalizando qualquer parte do blog".

Espero realmente que tenham gostado e peço que opinem e divulguem, pois quanto maior for o interesse de vocês, mas rápido sai a continuação :). Obrigado!

Tweet #PersnonalizandoTodoOBlog