Medidas de um Template do Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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:

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.

 

painel-modelo-minima

 

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.

template-medidas-tela

 

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

template-medidas-elementos

 

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:

 

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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

13 Comentários

    • Respeito os colegas que fazem cursos (eu mesma já paguei e cancelei), mas aprendo muito mais na internet. Obrigada pelos esclarecimentos!
      Ótimo artigo…

      Responder

  1. Sou iniciante e as suas informações estão sendo muito uteis para a formatação do meu blog. Parabens pelo trabalho!

    Responder

  2. Já te parabenizei num outro tópico e quero te parabenizar de novo. Vc explica de um jeito que mesmo quem não tem tanta experiência no assunto consegue fazer alguma coisa. Sucesso!

    Responder

  3. Se não fosse por esse tutorial eu nem sei o que iria fazer da minha vida (exagerado ¬¬)
    Enfim, valeu pela força ae o/

    Responder

  4. Marcos! Primeiro quero te agradecer, por voçé ter mudado o meu conceito, de como fazer funcionar o meu blog, que inclussive ja comecei a estudar HTML e outras coisas mais e inclussive a fazer web site. Em segundo, quero te parabenizar pelo seu profissionalismo, a forma como voce esclarece tao bem para um iniciante como eu que antes nao sabia fazer nada, e tambem pelos tópicos que voce edita, são de um importacia muito grande e espero que como eu esteja ajudando muita gente. Parabéns garoto! Continue assim.
    Neto – Atlanta – U.S.A.

    Responder

  5. ola boa noite…
    é já a segunda vez que aqui deixo comentário…e nem sequer possuo blog algum nesta temática…mas apenas para lhe dar os meus parabéns pela forma clara e objectiva como ensina explicando de acordo com a sua experiencia nesta area…uma vez mais a sua explicação é limpída e de facil compreensão…no que a mim diz respeito (nem sequer sou iniciante,apenas um curioso)…obrigada por partilhar seus conhecimentos..continuarei a ser um seu seguidor atento…quem sabe me entusias-me por esta area da blogosfera…
    continuação de muito sucesso
    iurf
    Nota: parabéns pelo novo aspecto do blog….

    Responder

  6. Nossa,como me ajudou esse tutorial,consegui ajeitar o meu que estava desalinhado.Você consegue (explicar) sem (complicar)!Parabéns e obrigado.

    Responder

  7. Pingback: Personalizar o Hack “Leia mais” do Blogger – Resumo de Postagem | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.