Entendendo o template do blogger

Bom dia , amigos leitores!

Em uma postagem anterior falei sobre a estrutura do template do blogger hoje vou falar para vocês sobre os elementos básicos , aqueles que temos que procurar cada vez que desejamos inserir uma personalização ou modificação no nosso template , entendendo o template do blogger fica mais fácil saber como e onde podemos personalizar.

Bora lá .

Entendendo o Template do Blogger

Vamos começar então pelos elementos básicos do blogger.
Todo o trecho que iremos ver está acima do fechamento de ]]></b:skin>

body - corpo do blog , onde podemos mudar o plano de fundo, (background) , ou inserir uma imagem , (URL) . 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 à partir desses trechos do códigos vamos achar 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 sequencia 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 fui acrescentar 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 pagina inicial. 

( mas também pode estar nesse outro trecho em alguns modelos, .post-outer .comments { )

Em */comments*/ é onde podemos personalizar a área dos comentário do blog , ainda não fiz nenhuma alteração nesse código , mas em breve vou testar 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 ai .

Algumas personalizações são adicionadas em outras partes do template , ou anteriormente a inclui-las necessitamos adicionar alguma variável , mas essa parte veremos mais adiante , por hoje é isso espero  que gostem e que tenha sido útil .

Em breve vou deixar disponível um template base para ser personalizado , aguardem.