BalaHalls

Introdução:

O template do blogger beta (novo blogger) utiliza XML data ao invés de HTML, como o clássico, o que siginifica que, se o blogger clássico toda vez que a página era autalizada, criava um novo arquivo bloggerHTML na sua conta blogspot – e por isso era necessário republicar o blog toda vez após cada atualização -, o blogger beta atualiza-se de maneira automática, pois nnao cria um novo arquivo HTML para ser lido pelo browser, mas apenas insere os novos dados na database do blogspot, o que é feito através dos widgets (pequenos aplicativos).
Os templates do blogger beta podem ser “baixados” e “upados” do seu computador e são arquivos XML – não é possível copiar e colar templates do blogger antigo para o novo blogger e vice-versa.
Bom, agora vamos ao template passo a passo:

1. Começando pelas Variable Definitions (o código que vem antes disso é de uso do blogger, como por exemplo para informar mecanismos de busca o assunto do blog etc):

'Variable Definitions' são as responsáveis pela seccão cores e fonts da edição do seu layout. No blogger antigo cada elemento do site deveria ter sua cor definida no CSS com o código correspondente (por exemplo, color: #FFFFFF) e toda vez que fosse para mudar a cor tinha que ir lá e editar o código. No blogger beta é definida uma ‘variable definition’ para este elemento, seja sua cor ou sua fonte, e esta pode ser editada pelo editor rápido de cores e fontes.

Por exemplo, no CSS desse blog nap arte a: link [definições sobre estilos dos links] está color: $linkColor, ou seja, cor do link igual à variable definition linkColor, que é definida com o editor rápido de cores. Se você fosse, por exemplo, no CSS de outro elemento, digamos em a:visited [definições sobre estilos dos links já clicados] e substituir color: $visitedlinkColor; por color: $linkColor, a cor dos links visitados ficará igual à do link normal. E a variable definition $visitedlinkColor não estará mais sendo usada. Mas isso não é necessário se vc pode apenas ir no editor de cores e definir ambas com a mesma cor.

As variable definitions iniciam com o seguinte código:

<b:skin><![CDATA[/*
/* Variable definitions
====================

2. Style Sheet - CSS:

A tag <b:skin> indica o início da seccão CSS de seu blog. A secção que define estilos, desde bordas, cores, até larguras. Cada parte do CSS define o estilo de algum elemento presente na arte HTML (por exemplo, um widget ou o header todo, o content, a sidebar etc).
Em suma. CSS é forma. HTML é conteúdo.

Por exemplo, um pedaço do CSS deste blog é assim:

/* Content --→ DEFINE OS ESTILOS DO CONTEUDO DO SITE (A PARTE ABAIXO DO HEADER/CABECALHO, COMPOSTA POR SIDEBARS E COLUNA DE POSTS)
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper { ---→ É O ESTILO DO CONTEUDO TODO
width: 100%;
float: center;
margin: 0px auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 2px solid $borderColor;
border-top: 0;
}
#main-wrapper { ----→ ESTILO DA COLUNA DE POSTS
margin-left: 1%;
padding: 15px 15px 15px;
width: 52%;
border-right: 1px dotted $borderColor;
border-left: 1px dotted $borderColor;
float: left;
background-color: transparent;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#left-sidebar-wrapper { ----→ ESTILO DA BARRA DA ESQUERDA
margin-left: 1%;
margin-left: 2%;
width: 19%;
float: left;
background-color: transparent;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#right-sidebar-wrapper { -------> ESTILO DA BARRA DA DIREITA
margin-right: 1%;
width: 21%;
float: right;
background-color: transparent;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

/* Label Cloud Styles --------→ ESTILO DO WIDGET QUE EU INCLUI PARA MOSTRAR MARCADORES COMO TAG CLOUD
----------------------------------------------- */
#labelCloud {text-align:left;font-family:trebuchet;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:none}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


A parte CSS do site acaba com a seguinte tag (equivalente a <style> no blogger antigo):

]]><b:skin>


3. O conteúdo do blog: HTML tags

Essa é a parte que define o que contém seu site (coluna de posts, elementos de página, footer etc). Toda vez que você adciona ou elimina ou muda de lugar um elemento de página no editor do layout é nessa secção que o código se altera.

O Início dessa secção se dá pela tag: <body>

Dentro de body está o outer-wrapper, que começa com a tag <div id='outer-wrapper'>

Dentro do Outer Wrapper estão:

1. Header Wrapper contendo o cabeçalho
2. Content Wrapper contendo o Main e Sidebars Wrappers
3. Footer Wrapper contendo o Footer.

Se você adciona um elemento de página na sidebar por exemplo é dentro do sidebar wrapper que entrará um novo código, o códiogo do elemento que você adcionou.

Os widgets começam com <b:widget e terminam com </b:widget>. São eles que pegam e colocam ou tiram informação da database do blogspot, coisa que antes não havia no blogger antigo. O template do blogger beta é inteiro baseado em widgets, chamados elementos de página no layout.

Fonte: MetaBlog Compulsivo