Nesse artigo, traduzirei um artigo do site Blogger Yard que traz uma longa discussão sobre uma questão popular dos usuários do Blogger, que é como criar seu próprio template.
Requisitos para criar um template
Passo 1. Preparar um Blog de teste para a criação do template
Passo 2. Entendendo a estrutura básica do template
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html 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>
<b:if cond=”data:blog.pageType == ‘index’ “>
<data:blog.pageTitle/>
<b:else/>
<b:if cond=”data:blog.pageType != ‘error_page’ “>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
<b:section class=”navbar” id=”navbar” maxwidgets=”1″ showaddelement=”no”>
<b:widget id=”Navbar1″ locked=”true” title=”Navbar” type=”Navbar”/>
</b:section>
</body>
</html>
No código acima, você pode ver que existem tags XML e HTML no início, o que significa que esse template foi construídocom XML e HTML. A extensão principal para esse código será XML. Se você copiar o código acima e colar sobre o código de um template nada será mostrado no blog, pois trata-se uma página HTML em branco. Vamos entender a estrutura básica.
1. tags XML e HTML : Como foi dito anteriormente, tags XML e HTML são as tags principais que armazenarão todo o template.Se quisermos salvar esse template em um computador devemos usar a extensão *.xml pois o Blogger suporta apenas templates XML.
2. Long <title> Coding : Se você olhar no código da tag title logo abaixo de <head> verá um código enorme para essa tag. Basicamente, isso é um código personalizado para o título, o que traz muitos benefícios. Usamos tags condicionais para personalizar o código dessa tag. A primeira condição diz que se alguém abrir a página inicial então usaremos o nome do blog como título. A segunda condição mostra o título de um artigo ou de uma página como título do website. Por último, temos uma página de erro 404.
3. Tag <b:skin> para armazenar folhas de estilo: Aqui temos uma construção adicional para templates do Blogger que usa a tag <b:skin> com CDATA para armazenar todo o código CSS do blog. Nessa tag, você verá apenas o código CSS que será usado em todo o blog. Assim, todo CSS que você escrever deve ser colocado dentro dessa tag.
4. Tag <b:section> para Widgets : No Blogger, usamos essas tags para criar widgets. Coisas importantes como Blog Title e Content são feitas pela implementação de widgets no template. Para encurtar a conversa, existem widgets padrão para o Cabeçalho e Conteúdo que usamos ao criar nosso template. Para criar widgets, devemos circunda-los com tags <b:section> para nos ajudar a preparar a página de layout.
Passo 3. Criando o cabeçalho
<b:section class=”header” id=”header” maxwidgets=”1″ showaddelement=”no”>
<b:widget id=”Header1″ locked=”true” title=” ” type=”Header”></b:widget>
</b:section>
O código acima não é um código completo para um cabeçalho, mas quando você integrar ele ao template, ele se tornará maior automaticamente. Salve esse template, recarregue a página Edit HTML e você verá uma seta no lado esquerdo da tag <b:widget>. O Blogger automaticamente escreverá o código padrão para ela. Assim, vamos entender o código para o cabeçalho.
1. <b:section> com class=’header’ e id=’header’ : Em primeiro lugar, na tag section, você verá os atributos class=’header’ e id=’header’ que são tags para classe e id comuns do CSS. Dessa forma, com a ajuda dessa tags, você pode personalizar o cabeçalho fornecendo valores específicos para comprimento, altura, margem, espaçamento, tamanho da fonte, cor, etc apenas para ele.
2. <b:section> com maxwidgets=’1′ : Não é preciso muita explicação aqui, mas para iniciantes, aqui vamos nós; Existe uma outra tag XML do Blogger que terá o atributo maxwidgets=’1′ com essa, assim podemos simplesmente ajustar o número máximo de widgets nessa seção apenas substituindo o número 1.
3. <b:section> com showaddelement=’no’ : Esta é apenas outra tag simples pela qual podemos ativar ou desativar a opção Add a Gadget.
4. <b:widget> com id=’Header1′ : No widget de cabeçalho, há uma tag id para personalizarmos ele usando o CSS.
5. <b:widget> com locked=’true’ : Essa tag permite que você trave e destrave widgets facilmente pela escolha entre true e false. Quando o widget está travado, não é possível edita-lo facilmente pela página de Layout.
As configurações atuais para esse widget e seção são adequadas, então não precisamos edita-las. Abaixo, será fornecido tags CSS class e id que lhe ajudarão a personalizar seu cabeçalho. Simplesmente, adicione o CSS abaixo dentro da tag <b:skin> e preencha com suas próprias propriedades.
#header { }
#header h1 { }
#header h1 a { }
#header .description { }
Passo 4. Criando o Widget para o Menu das páginas
<b:section class=”tabs” id=”crosscol” maxwidgets=”1″ showaddelement=”yes”>
<b:widget id=”PageList1″ locked=”false” title=”Pages” type=”PageList”>
</b:widget>
</b:section>
Como fizemos no caso do cabeçalho, esse também é um pedaço de código que automaticamente será complementada com um um código padrão. Para personalização, simplesmente use as tags class e id do código acima e escreve seu próprio CSS. Mas, dessa vez irei lhe dar algumas tags CSS vazias nas quais você irá preencher de acordo com suas necessidades.
.tabs { }
#corsscol { }
#PageList1 { }
#PageList1 ul { }
#PageList1 ul li { }
#PageList1 ul li a { }
Passo 5. Criando o Widget para o conteúdo
<b:section class=”main” id=”main” preferred=”yes” showaddelement=”no”>
<b:widget id=”Blog1″ locked=”true” title=”Blog Posts” type=”Blog”>
</b:widget>
</b:section>
De forma análoga aos demais widgets, aqui também criamos uma seção apra o widget do conteúdo. Após salvar esse widget no template, recarregar o editor fará que seja adicionado o código padrão para esse widget automaticamente. Aqui, comece a personalizar esta seção de acordo com suas necessidades. Observe as tags class e id e escreva CSS para essas tags. Quando você expandir esse widget, terá diversas tags <b:includable> que estão na área do artigo. Existirão tags desse tipo com id=’post’ e var=’post’. Se você expandir essas tags será exibido o código para a área do post onde você poderá personaliza-la de forma fácil.
Passo 6. Criando uma área personalizada para Gadgets como uma Barra Lateral ou Rodapé
<b:section class=” ” id=” ” maxwidgets=” ” showaddelement=”yes”>
</b:section>
Não há nada de especial na tag <b:section> no código acima. Tags class e id estão vazias de forma que você possa adicionar seus próprios nomes e referencia-las no código CSS. Você pode usar classe id para embelezar a seção de gadgets definindo valores personalizados para comprimento, altura, espaçamento, margem, etc. Outra tag, maxwidgets, pode ser usada para limitar a quantidade de widgets nessa seção. Se quiser exibir a opção “Add a gadget” no layout, então deixe showaddelement com o valor yes, caso contrário, use no.
Passo 7. Configurando uma página de layout
body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }