O básico da criação de um template para o Blogger

Neste tutorial mostrei algo que aprendi recentemente e na amarra, já que não encontrei nenhum lugar, a não ser o ajuda do blogspot, para criar um template, pela menos o esqueleto, algo que me permitisse saber como se estrutura um template para o blogger, assim vou passar esse conhecimento aqui, assim quem estiver interessado pode pegar o tutorial, aperfeiçoa-lo e passar adiante, e assim a blogosfera sobrevive, mas por favor não se esqueça dos créditos, é muito feio se basear em trabalho alheio e não dar os referidos creditos. Então vamos aos passos.

Antes de mais nada gostaria de dizer que se você quer mesmo fazer um bom template, se quiser seguir esse tutorial, é bom que saiba pelo menos o básico de html e css, para isso recomendo o site do Maujor, apredim muita coisa lá, para quem sabe pelo menos o básico, esse tutorial vai ser de grande ajuda se você ainda não entendeu muito bem como funciona a estrutura de um template para o blogger.

Estrutura

Bom, antes da carne vem o esqueleto, ou seja, para criar primeiro seu template para o blogger você precisa pensar na sua estrutura, vai ter duas ou três colunas?
Quais cores eu vou usar, como combina-las?
Meu objetivo com esse tutorial não é entrar em detalhes sobre isso, mas sim mostrar como é a estrutura básica de um template habilitado para ser instalado no blogger, um rápida pesquisa no google sobre "criar template blogger" e você obterá várias dicas mais relacionadas a cores e quantidade de colunas, mas nada que fale especificamente sobre a estrutura de um template, que é o que eu vou fazer aqui, assim vai ficar mais fácil fazer customizações no seu template e não ficará perdido ao fazer as modificações. Tive que aprender isso pois recentemente troquei o template do meu blog e não encontrava em lugar nenhum algo que me dissesse como tudo funcionava especificamente, mas a Central de Ajuda do Blogger foi muito útil para mim.

Então vamos por exemplo seguir a estrutura básica de um template, depois eu ensinarei o que deve ser colocado e onde. Veja a imagem abaixo:

Temos então nesse layout:

• Cabeçalho;
• Área de posts;
• Sidebar (onde ficarão os widgets);
• Rodapé;

Então assim temos a área principal do layout chamada de body, é o corpo de todo a página, dentro desse corpo é que teremos os demais itens já listados. Como visto no nosso caso, temos 4 áreas no nosso template, temos que segmentar essas áreas de maneira apropriada para que o blogger possa reconhece-lo como um template. Assim um template para o blogger é divido em:

• seções;
• itens;

As seções marcam as áreas da página como o Rodapé, Sidebar, o cabeçalho, etc..
Agora como fazer com que o blogger saiba que uma determinada área do meu template é o sidebar direito ou o cabeçalho? Simples, teremos que adicionar determinadas tags para que isso possa acontecer. Mas lembre-se senão souber html e css não poderá acompanhar esse tutorial pois muito coisa do que eu disser aqui não lhe fará o menor sentido, pois isso é algo avançado.
Então vamos supor que você já posicionou os elementos do seu template atravês de divs, já definiu tamanhos que serão usados no cabeçalho, sidebar, rodapé e área de posts. Vamos começar então pelo cabeçalho. O código abaixo  dentro da sua div no cabeçalho definirá que essa região é o cabeçalho da página, onde se situará o título e alguma imagem:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

A tag <b:section> aceita os seguintes atributos:

• id - (Obrigatório) Esse é um identificado único, um nome, em seu template não pode haver outro com nome igual, pode ser com letras e números.
• class - (Opcional) Podem ter o mesmo nome que o id, tem a mesma função que no CSS assim como o id, permitindo que você possa aplicar outras estilizações a seção.
• maxwidgets - aqui define-se o número máximo de widgets aceito, senão estiver especificado, não haverá limites.
• showaddelement - (Opcional)Lembra-se daquela opção no no blogger onde aparece "Adicionar widgets",
  se essa opção estiver setada como "no", aquele item não aparecerá e
  widgets não poderam ser adicionados.
• growth - (Opcional) Essa opção determina se os itens na seção são organizados em pilha, um acima do outro, ou lada a lado. Pense por exemplo nos widgets do sidebar e dos widgets no rodapé. Pode ser horizontal ou vertical.

Assim no exemplo que eu dei acima temos:

• id = header.
• class = header.
• maxwidgets = 1 (Somente 1 widget poderá ser adicionado)
• showaddelement = no (Nenhum elemento poderá ser adicionado, então o link "Adicionar widget" não aparecerá)

Em um template para o blogger a estilização deve ficar no corpo da página dentro das tags:

<style type="text/css"></style>

Se quiser já pode começar a testar o seu template para ver como vai ficar no blogger. Poder começar criando uma conta no blogger, depois de cadastrado logue-se e vá na guia Layout e clique no link Html, pode começar clicando em um link que está nessa mesma página para fazer backup do template atual, só por segurança, é um arquivo em xml. Depois disso você pode apagar todo o código que está aparecendo na sua janela, e inserir o código do template já criado ou modificado por você, mas sua nova formatação somente poderá ser vista se o template tiver ao menos o código básico que fica entre as tags <head> aceito pelo blogger.

Então será assim, no modelo de template que você criou remova tudo que estiver entre as tags <head></head>, inclusive as próprias tags, e cole o seguinte código abaixo no lugar:

<?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'>

<head>

<b:include data='blog' name='all-head-content'/>

<title>

<data:blog.pageTitle/>

</title>
</head>

Vê por que eu disse que se tem que entender HTML e CSS?
Repare que o código começa com uma marcação xml, pois esse é o novo formato que o blogger usa:

<?xml version="1.0" encoding="UTF-8" ?>

E termina com a tag de fechamento:

</head>

Bem, agora se você quiser poderá salvar o template, veja que fizemos o básico, que é pelo menos adicionar esse código, vá na guia layout e veja que não aparece nada a não ser o corpo do template, pois ainda não inserimos o código que definirá as seções no corpo do template. Volte para a edição do código.

Lembre-se que você já deve ter criado as divs definindo assim todo o formato do template, agora passaremos a inserir os respectivos códigos em cada área para que assim o blogger possa reconhecer. Começaremos pelo cabeçalho.

div id='header'>

<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'>


</b:section>


</div>

Repare no meu código acima, no meu template eu já havia criado uma div para o cabeçalho, dentro dessa div eu inseri o seguinte código:

<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'>




</b:section>

O códig acima é auto-explicativo, inseri uma seção com os seguintes dados:

• id = header1
• class = header1
• maxwidgets = 1 (O cabeçalho somente aceitará um widget)
• showaddelement = yes (No meu cabeçalho poderei adicionar widgets)

Agora dentro das tags <b:section></b:section> é que fica o código do widget adicionado, salve o template e vá na guia layout, verá o link "Adicionar Gadget", clique nele e na janela que aparecer, procure pelo cabeçalho da página e o adicione, e pronto, seu cabeçalho estará adicionado, viu como é simples.

Volte para a edição de código, se repara agora verá um código semelhante a esse:

<b:widget id='Header1' locked='false' title='De tudo mais um pouco (Cabeçalho)' type='Header'/>

Cada widget adicionado tem um código parecido com isso, não vou entrar em detalhes, na ajuda do blogger em português tem muita explicação sobre isso. Mas veja que cada widget tem seu id também e que deve ser único, cada seção e cada widget tem uma div própria, é para isso que serve o id, permitindo que depois você possa inserir estilizações em cada parte do seu template, como alinhamento, cor de fundo, borda e etc..

Mas repare que a parte que mais nos interssa mesmo é o código:

<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'>




</b:section>

Pois basta adiciona-lo, depois ir na guia layout e adicionar o widget necessário. O código para o sidebar seria assim então:

<b:section class='sidebar' id='left-sidebar' preferred='yes'>


<b:widget id='NewsBar1' locked='false' title='Noticias tecnológicas' type='NewsBar'/>

<b:widget id='BlogArchive2' locked='false' title='Arquivo do blog' type='BlogArchive'/>

<b:widget id='AdSense3' locked='false' title='' type='AdSense'/>


</b:section>

Veja o código acima, tenho a seção sidebar e dentro dela tenho três widgets. Tente adicionar somente isso:

<b:section class='sidebar' id='left-sidebar' preferred='yes'>



</b:section>

E depois vá na guia Layout e verá que o link "Adicionar widget" aparecerá, podendo assim adicionar widgets a vontade.

Agora o código CSS vai entre as tags <style type="text/css"></style>, mas com um detalhe, elas tem que estar dentro de uma determinada tag, que é:

<b:skin>

<style type="text/css">Aqui vai as estilizaçãoes</style>



<![CDATA[

Viu agora onde as estilizações devem estar, senão fizer isso ao tentar salvar o template haverá um erro e o código não poderá ser salvo, coloque tudo isso antes da tag de fechamento do cabeçalho </head>.

Agora o mais essencial, a seção dos posts, o código que eu vou apresentar a seguir é para uma seção de posts com o formulário de comentários abaixo do post, sem aquele link em que o formulário é aberto em uma nova janela, assim como vemos no wordpress:

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

</b:section>

Veja que crei um seção chamada main, e dentro dela adicionei um widget:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

O type='Blog' é um tipo pré-definido, informa ao blogger que essa é a área de posts, depois de tudo isso inserido, salva e vá na área do layout, verá que apareceu a área das postagens, clique no link "Editar" qua aparece e o configure a vontade.


Bem, isso é o que eu queria passar a todos, lembrando que para o rodapé vale o mesmo princípio aplicado ao sidebar, e na Central de Ajuda do Blogger você encontrá todas as definições para diversos parâmetros usados pelos widgets, podendo customiza-los mais ainda.


Lembrando que para aproveitar bem esse artigo é bom conhecer html e css senão muita coisa aqui não vai fazer sentido.

Se achou algum ponto meio complicado de entender, em pergunte nos comentários, assim faço a alteração necessária para que o artigo fique melhor.



E por favor se for copiar o artigo, não se esqueça dos créditos.