25 março 2021

Entendendo o template do blogger

em 25 março 2021

Tempo de leitura:
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.


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


Nenhum comentário:

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.

Confira também, outros artigos: