Conhecendo a estrutura do template Blogger

em 24/03/2021

Tempo de leitura:
Conhecendo a estrutura do template Blogger



  • Hoje falaremos sobre o que é um  template, conceito de web template, template HTML com CSS, diferença entre HTML e XML  e estrutura básica do template blogger.

  • Veremos o básico para ficar mais claro onde instalar códigos de melhorias, personalizações, hacks de funcionamento e acompanhamento.

  • Você deve estar pensando nossa, assunto chato né! 

  • Eu pensava assim até que a curiosidade para entender e criar meu próprio tema falou mais alto.

  • Quando me aprofundei um pouco mais no conhecimento sobre a estrutura do template do Blogger, configurar ajustes, deixar o template mais funcional, limpar o layout, compactar códigos e otimizar entre outras coisas.

  • Blogar acabou se tornando mais simples e fui adquirindo mais opções para destacar as postagens.
  • Como boas explicações claras e simples tudo ficou mais fácil, agora venho dividir o que aprendi com vocês.

  • Para quem gosta de personalizar seu tema (template do Blogger) entenderá um pouco mais sobre como tudo funciona e também acaba sendo uma boa introdução para que deseja fazer um layout.

  • Além de evitar erros na hora de instalarmos algum código.
  • Lembrando sempre que antes de realizar qualquer alteração em seu tema, faça um backup do tema atual estando em uso, caso algo de errado você pode restaurar o  anterior.
  • Prometo não deixar sua leitura massante e nem muito extensa.

  • Me acompanhe!

Entendendo o Template  Blogger



  • Primeiro entenderemos o que é um template, se você procurar na internet, o que é um template de  site ou um template, web encontrará a seguinte resposta:


  • Modelo de documento de conteúdo, com apresentação visual e instruções de qual tipo de conteúdo entram a cada parte de apresentação, começo e final. 


  • Conceito de web template: 

  • Ambiente de desenvolvimento de conteúdo, web, estabelecido como modelo que permite criar um código de programação de forma rápida com execução em tempo real 'online'.

  • Web, template (modelos de página), instrumentos utilizados para separar a apresentação do conteúdo em web, design e para produção massiva de documentos web.

  • Os templates são interpretados por um "Sistema de Templates".


  • Um template HTML com CSS:


  • A estrutura de um template HTML (Hyper Text Markuo Language), existe para que o navegador consiga entender aquele documento corretamente. O CSS (folha de estilo em cascata), é que da (estilo), cor, fonte entre outros.

  • Diferença entre XML e HTML:

  • O XML (extensible markup language), é uma linguagem de marcadores como HTML ela descreve dados enquanto o HTML exibe, a XML não é uma linguagem substituta do HTML, pois sua criação tem objetivos diferentes sua grande vantagem é poder criar suas próprias tags.


  • Como existem tipos diferentes de HTML, a declaração correta é extremamente importante, isso economiza tempo dos navegadores em tentar descobrir o tipo de  código utilizado na sua página.


  • Agora vamos aquele que nos interessa o template.

A construção da estrutura do template Blogger



conhecendo a estrutura do template blogger


  • Para entender melhor abra seu blog de teste se você ainda não criou um  aproveite e faça agora.

  • Primeiro que é a melhor maneira de testar códigos sem comprometer o blog oficial e muito útil para aprender.

  • Leia a postagem e vá observando as tags e seu conteúdo no blog de teste, ajuda bastante a entender melhor.


  • O código, fonte do blogger começa com essa linha:

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

  • <!DOCTYPE html> (declaração do tipo de documento da sua página)

  • Essas duas primeiras linhas indicam ao navegador como ele deve ler o código.

  • Após essa declaração, começa o documento Html, da seguinte forma na maior parte dos templates do blogger.

  • <HTML>

  • <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>

  •   

  • Mesmo que mude um ou outro detalhe sempre começa com <HTML.

  • A estrutura básica será:


  1. <html>   dentro da tag de abertura e fechamento está tudo que compõe o blog
  2. <head>   É a tag de cabeçalho dentro dela está inserida informações que o navegador vai ler, como títulos, descrições, palavras-chave, folha de estilo css e outros.
  3. <title>Titulo </title>
  4.  </head>
  5. <body> Corpo da página responsável  por expor o conteúdo para o usuário final, postagens e elementos de página.
  6. <h1>heading tag</h1> a mais importante em matéria de SEO
  7. </body></html>

  • Ainda no início do código dentro da tag <head>, (cabeça/cabeçalho), encontramos a tag <meta> ou metatags que são extremamente importantes poie elas fornecem dados aos navegadores e aos motores de busca sobre o documento HTML em que estão inseridas.
  • Veremos sobre elas em uma postagem mais adiante.

  • Os rótulos html são conhecidos como tags, iniciando com o sinal < menor e fechando > maior, se diferenciando apenas pela / barra que indica o fechamento da tag.

  • <abertura> </fechamento>

  • Cada tag possui uma abertura e um fechamento, caso você esqueça de fechar logo aparecerá uma rejeição ao código inserido.

  • Existem também tags nulas, mas veremos isso mais tarde.


  • CSS - Folha de Estilo é uma linguagem própria  que define como será aplicado o estilo aos elementos HTML.

  • Essa folha de estilo começa dentro da tag <head> com a marcação: <b:skin><![CDATA[/*

  • e termina com ]]></b:skin>  dentro dessas linhas está toda aparência do blog.

  • Após o fechamento da tag </head> você verá a abertura da tag <body> que nos templates do blogger são:

  • <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

  • Complemento para visualização em celular, também pode ser personalizado e obrigatório ser otimizado.


  • Para entender bem cada explicação acima, abra um tema do blogger e vá olhando cada conjunto de códigos que citei.

  • Uma boa ideia é sempre manter um blog de testes para inserir códigos novos e realizar experimentos.

  • Gostou!

  • Curta, compartilhe e não esqueça de deixar seu comentário.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.