Medidas de um Template do Blogger

Como saber as medidas das partes de seu Template.

Saber criar um template ou modificar suas partes de forma significativa pode ser uma tarefa complicada para a maioria, mesmo assim, algumas partes importantes e fundamentais do código-fonte é preciso conhecer e saber como usar. Acredito que o mais importante é saber as medidas das partes de seu blog, como o espaço de largura da área onde ficam os artigos, a largura da sua Sidebar (barra lateral), cabeçalho e roda-pé.

 

Antes de prosseguir com esse tutorial informativo, precisamos tomar alguns cuidados e ter alguns parâmetros. Sempre que for mexer em algo no código-fonte de seu blog, por mais simples que seja, faça um backup do modelo para ser restaurado caso algo sair errado ou mesmo por mera segurança:

• Backup no Blogger – seu Blog seguro

Outra coisa é sempre ter um blog de testes. Crie um blog alternativo, só para fazer testes nele, tanto para novos gadgets, quanto para modificações mais profundas em seu layout. Isso vai te ajudar a aprender mais rápido e evita erros no seu blog principal.

 

Para o que vamos mostrar aqui, tomaremos por padrão o template Minima do Blogger, aquele que quando se inicia um blog já vem incorporado originalmente. Se você clicar no menu “Layout” ~> “Escolher novo modelo” é o primeiro da lista.

 

 

Escolhemos esse por ser o mais simples e todos os outros, mesmo o mais elaborados desenvolvidos por terceiros, tomam o Minima por base, e todas as modificações que o Blogger faz sobre a estrutura de layouts são disponibilizadas nele para avaliação. Assim, o que funciona no Minima, funciona em qualquer um.

 

Salve esse modelo em seu blog de testes e clique no menu “Editar HTML” para olharmos o seu código-fonte.

Abra em outra janela paralela o código-fonte de seu blog principal apenas para observar e comparar com o que vamos descrever abaixo e para você identificar as partes de forma comparativa – mas não modifique nada no código-fonte do seu blog principal para não correr riscos.

 

Vejamos as cinco partes principais da estrutura de um Template.

 

Tudo isso se vê mais claramente no menu “Layout” ~> “Elementos da página”.

 

Agora vamos voltar ao código-fonte do Template Minima. Tudo o que vamos mostrar está na parte CSS do código de um template. Basicamente o CSS cuida da configuração geral de seu blog, que faz aplicar as mesmas definições para tudo que seguir aquele código. É o CSS que faz com que todas as páginas de um blog sigam sempre o mesmo padrão e, se quer fazer alguma modificação, basta mudar o código CSS para que todo o resto acompanhe.

 

Cabeçalho – Header.

Procure pelas seguintes linhas:

 

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

 

Indicado de vermelho temos o Nome do Cabaçalho do Blog e em negrito está a largura do cabeçalho. Normalmente a medida do cabeçalho é também a medida da largura de seu blog, mas isso não é uma regra e veremos abaixo onde fica a definição de largura total de um template.

Se você mudar as medidas ali contidas, para mais ou para menos e salvar o modelo, verá a mudança ao visualizar o seu blog. Faça o teste.

Temos alguns artigos e tutoriais que ensinam como mudar o cabeçalho de seu blog e como colocar imagens nele. Muita gente tem dificuldades justamente para definir qual é a largura que a imagem deve ter para caber corretamente no lugar do cabeçalho. Aqui está a resposta. Se quiser saber mais, leia:

• Imagem no Cabeçalho do blog
• Criando Cabeçalho para o Blog (programa gratuito e fácil de usar)

 

Largura Total.

Rolando um pouco mais o código-fonte, você encontrará as seguintes linhas:

 

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Da mesma forma, o que temos no início é o nome do código referente à largura total de seu template que é a parte em negrito mais uma vez. Todo o restante de qualquer medida que ficar dentro tem que seguir esse número e a soma das partes não pode ser maior que a largura total para seu blog não ficar desproporcional. Então, a simetria de um blog é definida principalmente por essa medida.

Conforme, no caso do modelo de layout Minima, a largura total é a mesma da largura do Cabeçalho.

 

Postagens.

Esta é uma parte importante e que deve ter a maior parte do espaço de um blog, pois é onde fica o seu conteúdo. Seu código fica logo abaixo do da Largura total:

 

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

 

Veja que, do total da largura do template, que é de 660px no padrão do Minima, 410px são reservados para os posts – praticamente dois terços. Essa é a medida ideal que considero para qualquer blog. Reserve ao menos 60% ou 70% de seus espaços para os artigos. Isso garantirá que você possa usar imagens e vídeos sem problemas e o texto ficará fácil de ler com uma fonte maior, sem problemas.

 

Sidebar – Barra Lateral.

Se o seu conteúdo é o mais importante, a navegabilidade de seu template é indispensável e isso se dá principalmente pelo que você colocar na barra lateral de seu blog como elementos de página. O código fica imediatamente abaixo do das postagens:

 

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

 

Nessa medida deve caber bem os títulos de seus artigos, seu perfil e alguma publicidade (se for monetizar) e até algumas imagens. O padrão do Minima não é muito bom pra quase nada, pois é muito estreita.

 

Se somarmos as medidas de #main-wrapper + #sidebar-wrapper (410px + 220px) teremos apenas 630px sendo usados de um total de 660px que é a Largura Total do template Minima. Essa diferença de 30px que sobram é por causa das margens que não deixam uma parte colada à outra e não mistura os conteúdos de um com o outro. Todo modelo de template criado tem um padrão de margens que precisa ser respeitado para mantes a simetria.

Se o ponto principal da simetria de um template é a Largura Total, o segundo mais importante são as margens que separam as partes. sobre as margens trataremos num outro momento.

 

Roda-pé – Footer.

Todos os blogs têm um roda-pé, mesmo que seja um gadget para se adicionar ou criar, como é no caso do Minima, que pode ficar sem um roda-pé se você não colocar nada lá. Mas esse também tem medidas específicas e precisa ser observada, caso você faça alguma modificação nas dimensões de seu blog.

 

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

 

Aqui ele tem as mesmas medidas da Largura Total do template, mas sempre acompanha a medida do cabeçalho (por padrão). É importante observar essas medidas para que os gadgets adicionados ali não fique desconfigurados com o restante do layout ou desalinhados.

 

Por fim, caberá a você fazer testes e aprender como modificar as medidas e larguras de um template. Aproveite o blog de testes, instale o backup de seu seu blog principal e mexa nele para ver o que você pode fazer sem comprometer o original.