Como criar um template para o Blogger do zero

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.

Basicamente, essa tarefa se enquadra na área de Desenvolvimento e Design Web, então uma pessoa precisa ter habilidades nessas áreas para criar um template do Blogger para poder ler e entender esse artigo.

Requisitos para criar um template

Em primeiro lugar, é importante mencionar os requisitos que deve-se ter para projetar e criar um template para o Blogger, pois uma pessoa comum não conseguiria criar templates facilmente. A primeira coisa seria conhecer o serviço Blogger.com perfeitamente. Como criar um blog, criar posts e páginas, fazer pequenas personalizações, testar gadgets e também como essa plataforma funciona de fato. Depois disso, algum conhecimento básico de design web é necessário, sendo que HTML e CSS são os itens mais importantes. No Blogger, podemos usar HTML, CSS, XML e javascript. Se você souber todas essas linguagens, então não encontrará problemas na criação de um template profissional.

Passo 1. Preparar um Blog de teste para a criação do template

Um procedimento comum antes de criar qualquer template é criar um blog de teste para esse template. Dessa forma, crie um blog e publique pelo menos uns 10 artigos nele. Deve haver pelo menos uma imagem, todos os cabeçalhos, 4-5 parágrafos de texto, lista ordenada e não-ordenada e citações em cada artigo.Projetaremos cada um desses itens, então crie esses 10 artigos com todas essas coisas e também integre alguns widgets importantes no rodapé e da barra lateral. Depois disso, você pode aplicar qualquer um dos templates padrão no blog, mas removeremos este template bem cedo para substituir pelo nosso próprio template.

Passo 2. Entendendo a estrutura básica do template

Antes de iniciar a criação do template, devemos entender a estrutura básica de um template do Blogger. Podemos dizer também que estamos criando uma página em branco simples de um template. Dessa forma, abaixo segue um código básico  para que você entenda a estrutura básica.

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

Após aprender a estrutura básica, vamos começar pela criação de um cabeçalho para o blog. Basicamente, existem apenas duas coisas importantes ao criar um template para o Blogger. A primeira é o Cabeçalho e a outra é o Conteúdo. Outras coisas podem ser importantes, mas essas duas são as principais Usaremos um widget personalizado para o Cabeçalho de acordo com nossas necessidades. Basicamente, o cabeçalho é um widget, e devemos saber que para criar um devemos criar uma seção para um ou vários widgets. Copie o código abaixo e cole em qualquer lugar entre as tags <body> do template onde você quiser exibir 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

Não mencionamos antes o widget para o menu das páginas, que tambpem é importante e deve ser criado. Esse tipo de menu apenas mostra links para páginas criadas com o Blogger. Nos templates padrão do Blogger, esse widget é largamente usado, assim irei mostrar como você pode implementa-lo em seu próprio template. Apenas mostraremos um código XML e HTML padrão e mostraremos como personaliza-lo com CSS. Se você possuir um bom conhecimento de CSS e HTML poderá facilmente criar seu próprio menu em qualquer lugar de seu template. Vamos começar.
Esse widget é criado, como no cado do cabeçalho, pela adição ao template de uma seção e widget. Assim, abaixo temos um outro código que terá tags para seção um widget para listagem de páginas que é o centro de tudo. Apenas ponha o código abaixo onde você queira exibir um menu de 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

Agora chegamos na parte principal, a mais importante de todas. No Blogger, criamos um widget padrão que será de fato o widget para os posts. Na página de layouts, você pode ter visto um grande widget com o nome Blog Posts. Podemos criar facilmente esse widget com pouco código, mas personalizar ele de acordo com nossas necessidades pode ser um pouco difícil. Em primeiro lugar, abra o editor HTML do Blogger e cole o seguinte código:

<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é

Os cinco passos acima irá permitir que você crie um template simples, mas criar uma área para gadgets personalizados pode ser útil para criar barras laterais, rodapé e outros tipos de gadget. Assim, nesse passo iremos ver como podemos facilmente criar uma seção para gadgets no layout do blog. Apenas iremos criar um tag <b:section> na qual poderemos adicionar os widgets que quisermos. Vá para o editor HTML e cole o seguinte código no local que quiser criar a área para gadgets:

<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

Ao criar um template, tome cuidado da página de layout no blog, porque essa página depende do template do blog. Se  você fizer as coisas corretamente, então não tem como fazer bagunça aqui, mas se encontrar algum problema, então temos uma solução para isso. Podemos rearranjar as seções para os widgets e para os gadgets através do uso de códigos CSS simples. E para isso, sugiro dar uma olhada no artigo do mesmo autor fixing blogger layout page messed up. para arrumar os widgets na página de layout, usaremos o CSS da seguinte forma:

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 }

Guia avançado

Qualquer pessoa que possuir um conhecimento básico de design web pode criar um template para o blogger apenas usando códigos HTML e CSS simples. Iniciantes podem encontrar dificuldades para entender a estrutura de um template do Blogger, mas com a prática, isso pode ser superado. Aqueles que podem criar templates HTML ou temas de qualquer outra plataforma, provavelmente não enfrentarão nenhum problema.
Nos passos acima, criamos apenas um template simples que contém apenas cabeçalho, menu de páginas e posts. Não há uma barra lateral ou rodapé no template acima. Você pode criar uma barra lateral fornecendo um comprimento específico para os posts, flutuando o widget dos posts à esquerda e criando uma outra seção que irá ser a barra lateral. Você precisará flutuar a barra lateral para a direita e fornecer um valor para o comprimento dela de forma que tanto o posts quando a barra lateral caibam na tela. Você pode fazer muito mais experimentos com o design de um template e pode também encapsular cada uma das seções de widgets com tags HTML específicas.
Ao criar templates, algumas vezes pode ser útil fazer uso do Inspect Element do Google Chrome que é uma ferramenta comum e ajuda a editar qualquer website. Lhe ajudará também a encontrar tags específicas que podem ser personalizada com CSS.

Palavras finais

Então, é dessa forma que podemos facilmente criar um template para o Blogger do zero. Esses são os fundamentos da criação de templates, mas eu recomendo que você pratique continuamente de forma que fique cada vez mais confortável com a codificação de templates. Espero que esse guia lhe ajude a entender a estrutura dos templates do Blogger e a cria-los. Se você for bom em design web, então você pode se tornar um designer profissional de templates.

Traduzido de bloggeryard.com

  • Definitivamente o seu artigo é muito bom. Muito bom mesmo! 🙂 Para mim, que quero aprender a personalizar templates blogger para usar em marketing digital, este conhecimento será muito útil. Obrigado!

  • Olá Kleber, eu gostaria de ter um template igual ao seu aqui deste blog. É possível você compartilhar comigo o XML dele para que eu adapte o que eu puder ao meu projeto?

    • Alan, este blog foi criado usando wordpress e o tema Twenty Fifteen que acompanha a instalação padrão dele.

  • Gabriel Vanderlei

    Muito boa a postagem, realmente me ajudou muito, a muito tempo eu estava procurando alguma postagem que realmente me ajudasse com o template do blogger, e essa me ajudou. Muito bom.

  • Natália Flores

    Oi, eu já tenho conhecimento de html/css mas acho fazer layout pro blogger particulamente dificil. Mesmo testando os seus codigos seguindo a riscas as instruções, ele não deixa salvar e sempre tem um erro, eu corrijo o erro e aparece outro.

    • Gabriel

      Isso porque ele colocou todos os apóstrofos errado. Troque todos os ””’ por “””””””””

      • Ele colocou dessa forma os “”, porque esse código pode influenciar automaticamente no design deste site!

        • Pode se ele escrever em modo HTML na hora de publicar a postagem. Ele realmente utilizou aspas erradas.

          • Concordo totalmente, aí já é com a plataforma que esta usando para o design. As vezes as pessoas tem um pouco de preguiça para olhar como ficou a postagem! Um Abraço!

  • Carol Mendes

    Só queria agradecer pelo post. Me ajudou muuuuuuuuito!

  • Lucas Torres

    Cara muito, mas muito obrigado vc merece um beijo mas não o meu kkkkkk Vlw!!!

  • Eu realmente estou sem entender nada, eu já tenho conhecimento básico de HTML e CSS, não entendo essa parte de XML e esses ifs, mas mesmo assim fui acompanhando, porém, nada dava certo, minha página fica em branco o tempo todo, e fui fazendo as correções das aspas o tempo todo, o código não apresentava nenhum erro o blogger tb adicionava o que faltava, tudo certo, só q nada certo, ué?

  • Gabriel Machado

    Melhor tutorial da internet!!