Conhecendo a estrutura do template Blogger - Universo Blogueira Página não encontrada!Universo Blogueira

Conhecendo a estrutura do template Blogger

Publicado 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.

Por hoje é isso espero que gostem e que as explicações ajudem e tenham sido claras, não esqueçam de curtir, compartilhem, espalhem por aí.


Desejando personalizar seu tema confira as postagens de personalizações para os  templates blogger.

Você também pode baixar o template para blogs do blogger, editável e responsivo, confira!

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:

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.



Instagram | @blogueirauniverso