O Blogger é uma plataforma do Google que permite criar e hospedar de forma gratuita um blog completo e ganhar dinheiro com AdSense, infoproduto e/ou afiliado. A plataforma usa a linguagem XML em seu algoritmo para criar todas as páginas do blog, mas claro de forma limitada em relação ao servidor, contudo, você pode construir o layount do seu blog do jeitinho que quiser, sem limitações.
Para criar um template para o Blogger você vai precisar conhecer algumas linguagens: O HTML5, CSS3 e JavaScript. Essas coisas você aprende facilmente no YouTube e sem pagar nada, eles cobram apenas o seu like, um comentário e sua alma hahaha (Piadas a parte, o melhor canal para aprender desenvolvimento web com certificado é o Curso em Vídeo).
O que é preciso para começar?
Tudo que você vai precisar é de um computador com acesso a internet, um navegador da sua preferência, por exemplo: Google Chrome, FireFox, Opera, Safari, e Microsoft Edge. E também um editor de código que ajude no seu trabalho, por exemplo: Notepad++, TextEdit (macOS), Sublime Text, Visual Studio Code, Atom, entre outros.
Estrutura básica do template
O arquivo do seu template deve sempre ter a extenção (.xml) para que você consiga fazer o upload do arquivo no Blogger. Dentro do código-fonte do template existe uma sintaxe simples porém obrigatória, com elementos essenciais para o seu funcionamento. Cópie o código abaixo e deixe guardado porque essa é a estrutura básica que todos os templates tem em comum.
Perceba que ao fazer upload do seu novo template no Blogger, ele herda todos os widgets do template anterior, caso você não goste disso, basta deletar tudo no editor de código do Blogger e substituir pelo código abaixo para começar a desenvolver seu template do zero.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='pt-br' 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>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='#6c44b4' name='theme-color'/>
<meta content='#6c44b4' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#6c44b4' name='msapplication-navbutton-color'/>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.pageTitle/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:blog.pageName/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:blog.pageName/>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
Página fora de funcionamento
</b:if>
<b:if cond='data:blog.searchLabel'>
<data:label.name/>
</b:if>
<b:if cond='data:blog.searchQuery'>
<data:blog.pageName/>
</b:if>
</title>
<b:skin>
<![CDATA[
...AQUI VAI O SEU CSS
]]>
</b:skin>
</head>
<body>
<b:section id="Cabeçalho">
</b:section>
<script>
<![CDATA[
... AQUI VAI O SEU JAVASCRIPT
]]>
</script>
</body>
</html>Nessa primeira linha informamos que esse é um documento criado com XML do tipo UTF-8
<?xml version="1.0" encoding="UTF-8" ?>Depois disso, precisamos colocar a estrutura HTML completa com cabeçalho e corpo no código, em seguida temos que aprender a como colocar CSS, widgets, estruturas condicionais, variáveis, loops e etc. Para que o template fique completo.
Onde coloco o CSS?
Existem 3 tipos de CSS, o inline, interno e externo e é possível usar todos eles no template, contudo, aqui no Blogger existe uma quarta maneira que é uma tag personalizada que foi feita para você colocar os comandos de CSS.
<b:skin>
<![CDATA[
...AQUI VAI O SEU CSS
]]>
</b:skin>Essa tag é necessária para que você consiga fazer o upload do template no Blogger porque sem ela o código não funciona.
A <b:skin> deve ficar no cabeçalho do HTML, e dentro dela é obrigatório ter um <![CDATA[]]> para evitar problemas com alguns caracteres no XML.
Qual é a tag mais importante?
Em todos os templates é obrigatório ter (no mínimo) uma tag <b:section id=""></b:section> porque essa TAG é responsável por armazenar as widgets. Por exemplo:
<b:section id="Cabeçalho">
</b:section>Dentro da <b:section id=""> é obrigatório ter uma ID com um nome qualquer, esse nome vai aparecer na sessão de widgets da guia layount do Blogger. É nessa guia onde você vai colocar e configurar os widgets automaticamente.
Como colocar widgets manualmente?
Os widgets são os componentes do Blogger, por exemplo: postagens, cabeçalho, marcadores e etc. Elas devem ficar dentro de uma <b:section> e cada uma tem 2 parâmetros principais: o type e o id, o type é muito fácil porque é o tipo da widget, entre os principais posso citar o tipo "Blog" do widget de postagem e também o tipo "Header" do widget de cabeçalho do blog, a id é a mesma coisa do type, no entanto colocamos um número na frente, isso é obrigatório para representar qual widget ele é, pense um pouco, é comum alguns templates terem 2 ou mais widgets iguais, por isso existe o parâmetro id, para diferencia-los. Veja o exemplo a seguir de uma widget de cabeçalho.
<b:widget id="Header1" type='Header' locked="yes" title="Cabeçalho">
<b:includable id="main">
</b:includable>
</b:widget>Cada widget deve ter uma tag <b:includable id="main"> porque ela é responsável pelo conteúdo que vai aparecer no blog, podemos dizer que essa é a tag principal de cada widget. Mas existem outras que vamos explicar
<b:includable id="main">
<b:include data='post' name='printPosts'/>
</b:includable>
<b:includable id='printPosts' var='post'>
....Conteúdo delimitado
</b:includable>A tag <b:include/> foi feita para mostrar o conteúdo de outras <b:includable/> com IDs diferentes de MAIN, dentro da TAG principal pois todo o conteúdo fora da tag <b:includable id="main"> não aparece
Estruturas condicionais?
As estruturas condicionais do Blogger funcionam de maneira curiosa, porque atráves delas é possível escolher em qual página o conteúdo dentro delas vai aparecer, e elas funcionam em qualquer parte do código exceto dentro ou fora de <![CDATA[]]> porque é uma regra do Blogger, por isso não é possível criar um código em JavaScript para cada tipo de página do blog. Agora vamos mostrar alguns exemplos mas lógico que existem outras que não citamos aqui
Essa condição vai mostrar o conteúdo dentro dela apenas na página ínicial
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>Essa condição mostra o seu conteúdo apenas nos posts
<b:if cond='data:blog.pageType == "item"'>
</b:if>Essa condição mostra o seu conteúdo apenas nas páginas estatícas
<b:if cond='data:blog.pageType == "static_page"'>
</b:if>Essa condição mostra seu conteúdo na página de erro
<b:if cond='data:blog.pageType == "error_page"'>
</b:if>Essa condição vai mostrar o conteúdo apenas nas páginas de marcadores
<b:if cond='data:blog.searchLabel'>
</b:if>Essa condição vai mostrar o conteúdo dela apenas nas páginas de busca
<b:if cond='data:blog.searchQuery'>
</b:if>As condições que mostram o conteúdo delas para dispositivos diferentes podem ser inseridas dentro das condições mencionadas acima. Esse recurso permite criar um layount diferente para celulares e computadores.
Essa condição mostra o conteúdo dela apenas em dispositivos moveis
<b:if cond='data:blog.isMobileRequest == "true"'>
</b:if>Essa condição mostra o conteúdo dela apenas em computadores
<b:if cond='data:blog.isMobileRequest == "false"'>
</b:if>Variáveis
Existem dois tipos de variáveis, as "TAGS", e os "VALORES" cada um deles são inseridos de forma diferente mas ambas tem a mesma função.
A variável do tipo TAG armazena textos e existem dezenas delas que você pode estudar atráves de outros templates, um exemplo que eu gosto muito é a que armazena o título do blog
<data:blog.pageTitle/>A variável do tipo "Valor" é igual ao do tipo TAG, no entando, não é uma TAG e sim um valor que colocamos em um parâmetro de TAG. Quando usamos essa variável é obrigatório colocar o comando (expr:) antes do parâmetro. Dessa forma
<link expr:href='data:blog.url.canonical' rel='canonical'/>Lista de variáveis
Existem muitas data tags que podem ser usadas em qualquer parte do código e outras que não funcionam fora de widgets específicas. Nessa lista citaremos apenas as mais usadas
Abaixo temos as variáveis globalmente diponíveis.
Título do blog
<data:blog.title/>URL do blog
<data:blog.homepageUrl/>Título da página atual
<data:blog.pageTitle/>Codificação
<data:blog.encoding/>Linguagem do blog
<data:blog.languageDirection/>Os links de feed de descoberta automática para o cabeçalho da página.
<data:blog.feedLinks/>Abaixo temos as variáveis da widget de Cabeçalho da página.
Título do post
<data:title/>Descrição do do blog
<data:description/>Abaixo temos as variáveis da widget de postagem.
Título do post
<data:post.title/>Corpo do post
<data:post.body/>Autor do post
<data:post.author/>url do post
<data:post.url/>Data do post
<data:post.timestamp/>Abaixo temos as variáveis da widget de marcadores.
Nome do marcador
<data:labels.name/>URL do marcador
<data:labels.url/>Número de marcadores
<data:labels.count/>E existem muitas outras variáveis e operadores de condição para aprender, mas agora que você entende um pouco mais sobre desenvolvimento de templates para Blogger, chegou a hora de ser autodidata e estudar templates prontos. Esse conhecimento vai te permitir editar templates de outras pessoas sem muita dificuldade, desta forma vai aprimorando seus conhecimentos. Qualquer dúvidas deixem nos comentários.
E pronto!!! esse foi o post de hoje... tchau
