Entendendo o template do blogger

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.


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