Entendendo o template do blogger

By Adriana Bentim em 25/03/2021

Tempo de leitura:

• Na postagem anterior, conhecendo  a estrutura do template do blogger expliquei  sobre a estrutura básica e conceito de um template blogger.
• 
  
• 
  
• Observamos a diferença entre XML e HTML, e as tags que formam o template.
• 
  
• Hoje aprofundaremos mais no assunto e observaremos a parte dos códigos onde podemos realizar todas  as alterações visuais do nosso template, uma boa parte de onde inserimos os códigos CSS.

Template Blogger onde realizar alterações de cores, tamanho e personalizações em geral

• Começaremos então pelos elementos básicos do blogger.
• 
  
• Todo o trecho que veremos está acima do fechamento de ]]></b:skin>, é nessa área que personalizamos a sidebar, área de postagem, inserimos fontes, cores, separamos os gadgets e mudamos nosso template.
• 
  
• body — corpo do blog, onde podemos mudar o plano de fundo, (background), ou inserir uma imagem, (URL), além de alguns outros códigos que listarei mais abaixo.
• 
  
• Na maioria dos templates se apresenta, logo após ao final das variables definitions, (que veremos em uma postagem mais adiante), você encontrará:
• 
  
• 
  
• /* Content

• ----------------------------------------------- */
• body {
•   font: $(body.font);
•   color: $(body.text.color);
•   background: $(body.background);
• }
• 
  
• .header - o cabeçalho do blog onde de costume fica o título, as seguintes variáveis fazem parte desse trecho:
• 
  
• .header-wrapper ou .header-inner - corresponde a área total do cabeçalho.
• 
  
• .header h1 - correspode ao nome, (título do blog).
• .header h1 a - link do nome do blog.
• .header-descripition - a descrição que fica dentro do cabeçalho.
• 
  
• 
  
• Mais ou menos a partir desses trechos dos códigos acharemos diferença entre os modelos de template, mas a maioria não estará muito diferente.
• 
  
•  .content-outer ou #outer-wrapper - área total das colunas, geralmente abrange: área total das colunas, cabeçalho, coluna de postagem, sidebar e footer.

• .main-outer ou #main-wrapper - coluna total da área de postagem. Esse trecho abrange tudo que estiver dentro da coluna central de postagem, como a coluna de postagem, rodapé dos posts, área dos comentários e link de navegação.
• 
  
• 
  
• 
  
• Aqui nesse trecho é onde personalizamos a data das postagens com imagem, arredondadas, em hover e outras formas, quando vamos personalizar apagamos o código abaixo de /*Headings */ e substituímos pelo personalizado.
• 
  
• 
  
•  /* Headings
• ----------------------------------------------- */
• h2 {
•   font: $(widget.title.font);
•   color: $(widget.title.text.color);
• }
• 
  
• 
  
• Logo abaixo já encontramos o /*Widgets*/  onde está contido os gadgets da sidebar e onde incluímos as  personalizações geralmente abaixo desse trecho. Dentro dessa parte estão contidos tamanho, borda, texto, cor dos gadgets da sidebar.
• 
  
• /* Widgets
• 
  
• ----------------------------------------------- */
• .main-inner .column-left-inner {
•   padding: 0 0 0 20px;
• 
  
• }
• 
  
• Na sequência vem /*Post*/, coluna de postagem, nela fica o espaço ocupado pela postagem, incluindo: data, título, paragrafo, imagem do post, link de comentário.... estão representados pelas variáveis:
• 
  
• .post
• .post-outer
• .post-body - corpo do texto, onde definimos a fonte.
• 
  
• 
  
• 
  
• .main-inner .widget h2.date-header {  
•   border-bottom: 1px solid $(widget.title.border.bevel.color);
• }
• 
  
• (nesse modelo aqui é onde personalizamos a data, é só troca-los pelo código personalizado)
• ( mas você pode encontrar o código também dessas outras duas maneiras:
• .main-inner h2 data-header{ ou .data header span{ )
• 
  
• .post-header-  linha que vem abaixo do título da postagem.
• 
  
• .post-body img { - aqui é a parte que corresponde a imagem publicada dentro da postagem.
•   
• 
  
• h3.post-title a {
• font: $(post.title.font);
• color: $(post.title.text.color);
• text-decoration: none;
• }
• 
  
• Esse trecho é o correspondente ao título da postagem, é onde personalizamos, centralizamos o título, podemos trocar o código todo.
• 
  
• .post-footer - área do rodapé dos posts.
• 
  
• As variáveis abaixo fazem parte desse trecho, onde geralmente adicionamos elementos na linha do rodapé e personalizações.
• 
  
•   post-footer-line-1             
•   post-footer-line-2                  
•   post-footer-line-3 
• 
  
• 
  
• #blog-pager - link de navegação do blog, (no meu caso quando acrescentei a paginação numerada do blog, ela só funcionou quando apaguei esse trecho e substitui pelo código da personalização).
• 
  
• 
  
• .comment-link - geralmente dentro da coluna do rodapé do post, é o link de comentários na página inicial. 
• (mas também pode estar nesse outro trecho em alguns modelos, .post-outer .comments { )
• 
  
• Em */comments*/ é onde podemos personalizar a área dos comentários do blog, ainda não fiz nenhuma alteração nesse código, mas em breve testarei algumas personalizações.
• 
  
• 
  
• Em  /* Footer*/  rodapé do blog é onde personalizamos o rodapé do template do blog, pode ser com dois ou três gadgets e ainda podemos adicionar o gadget do Instagram antes dos créditos do blog que também incluímos a personalização por esse mesmo.

• 
  
• Também algumas personalizações necessitam hacks ou outro código para seu funcionamento que são inseridos antes dos fechamentos </head> se forem scrips e algumas outras antes de </body>.
• 
  
• Fontes extras, hacks como Twitter Card e Open Graph do Facebook, são inseridos logo abaixo da abertura de <head>.
• 
  
• Por exemplo, se você inseriu a personalização do rodapé de créditos o texto do mesmo, com link copyright, nome do blog deve ser incluído acima do fechamento da tag </body>, caso contrário não irá aparecer o texto.

• Algumas personalizações são adicionadas em outras partes do template, ou anteriormente a inclui-las necessitamos adicionar alguma variável.

• Assim possibilitando que você possa trocar cores, fonte através do painel de personalização avançado do blogger sem a necessidade de abrir o HTML, mas essa parte veremos mais adiante, por hoje é isso espero  que gostem e tenha sido útil.
• 
  
• Aproveite para baixar o template base disponível no link abaixo.

• Você pode inserir no layout free disponibilizado pelo blog, todas as personalizações publicadas aqui no blog.

• Layout free para blogs do blogger editável e responsivo.
• 
  

CURTA, COMENTE, COMPARTILHE!