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.

.

13 Comentários

  1. Muito esclarecedor este tutorial. Parabéns pelo ótimo trabalho. Com certeza irá ajudar muita gente.

    Responder

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

      Responder

  2. Sou iniciante e as suas informa√ß√Ķes est√£o sendo muito uteis para a formata√ß√£o do meu blog. Parabens pelo trabalho!

    Responder

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

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

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

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

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

    Responder

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