Adicionar nova Barra Lateral ao Blog [Nova Sidebar / Coluna]

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

Uma pergunta recorrente aqui no [ Ferramentas Blog ] é como fazer certas modificações no template, como adicionar uma nova sidebar (barra lateral). Mexer no código-fonte de um template requer alguns cuidados e muita atenção, mas é relativamente fácil. Vou mostrar aqui como você poderá adicionar uma outra sidebar ao seu blog e fazer pequenas modificações na posição da barra lateral para personalizar o seu blog.

 

Passos iniciais.

  • Antes de fazer qualquer modificação no seu modelo de layout, tenha um backup para poder recuperar de possíveis erros – Backup no Blogger – seu Blog seguro.
  • Sempre que desejar aprender algo novo para o seu blog que tenha de mexer no código-fonte, faça testes antes em um blog alternativo. Crie um blog só para fazer testes e aplicar as modificações em seu blog principal apenas quando tiver certeza de que tudo dará certo.
  • Entenda as medidas do layout de um template. Sem conhecer e saber como modificar as dimensões do blog é impossível aprender como adicionar uma sidebar – Medidas de um Template do Blogger.
  • Se você quiser trocar a Barra sidebar de um lado para outro (será útil para esse tutorial também) veja o seguinte artigo: Trocar sidebar de lado. Já que vamos adicionar uma nova barra lateral, pode ser útil saber como trocar os lados.

 

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

 

1. Definindo a Largura total.

Se amos adicionar um novo elemento ao template, siginifica que vamos precisar de mais espaço para ele. Cada template tem uma medida de largura e suas partes têm medidas definidas certas para o espaço que vão ocupar. Assim ou se diminui alguma parte ou aumentamos tudo para o que será colocado de novo.

Vá no menu e clique em “Layout” ~> “Editar HTML” e procure pela seguinte linha:

 

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

 

Essa é a parte que define a largura de um template. No caso, o que temos destacado de vermelho é a largura total do template, equivalente a 660px. Logo abaixo dessa parte você verá:

 

#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 */
  }

 

Que é a parte que define a largura das postagens no Blog, no caso com 410px. Em seguida há o código referente à barra lateral:

 

#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 */
}

 

2. Adicionando os códigos da nova Sidebar.

Vamos precisar de dois códigos para adicionar uma nova sidebar e o primeiro é duplicando o que já existe. Nesse caso a barra lateral tem 220px e esse código é que vamos usar para duplicar a barra lateral. Será preciso unicamente copiar esse código e colar logo abaixo, da seguinte forma:

 

#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 */
}

 

#sidebar-wrapper-nova {
  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 */
}

 

Veja que a parte verde é a duplicação, a cópia sem modificações da barra lateral original. Ao repetirmos o código estamos definindo que teremos uma nova barra lateral com aquelas características. É preciso dar um novo nome, como no exemplo usamos “#sidebar-wrapper-nova”.

Se adicionamos mais 220px na largura desse template, então será preciso adicionar esse valor nas medidas de largura total do Blog, no cabeçalho e no roda-pé para ficar tudo proporcional. Se antes media 660px, agora mede 880px. Por isso indicamos previamente a leitura do artigo “Medidas de um Template do Blogger”.

 

Para adicionar definitivamente a nova barra, será preciso um último passo. Role o código-fonte até encontrar o seguinte:

 

<div id=’sidebar-wrapper’>
        <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
…………
…………
</b:section>
      </div>

Os pontinhos são apenas ilustrativos e representam qualquer outro código que posso existir entre os códigos mostrados e não têm importância aqui para o q estamos fazendo.

 

Esse é o código que diz que há uma sidebar nessa parte. Para aparecer a nova barra que queremos, então duplique esse código também, exatamente como aparece em seu código-fonte, sem o que estiver dentro dele (aqui representado pelos pontinhos), colando logo abaixo do primeiro e modifique o que está indicado de vermelho:

 

<div id=’sidebar-wrapper-nova‘>
        <b:section class=’sidebar’ id=’sidebar-nova‘ preferred=’yes’>
</b:section>
      </div>

Note que “sidebar-wrapper-nova” é o mesmo nome que demos ao primeiro código que duplicamos (é preciso que seja o mesmo nome.
E a ID desse elemento novo tem que ter um nome diferente també
m, aqui chamado de “id:’sidebar-nova’”.

 

Salve o modelo e veja o resultado em seu blog. Essa barra será adicionada entre as postagens e a sidebar antiga. Você pode modificar as medidas delas como achar mais conveniente, sempre observando as proporções totais e os valores e medidas de outras partes.

Para conseguir mudar a posição da sidebar, veja o artigo que indicamos (Trocar sidebar de lado) para saber como proceder. Como já dissemos, faça testes, use um modelo de template alternativo e tenha um blog de testes com o seu template para ver previamente como ficaria o resultado.

Cada template tem características próprias e quando têm figuras e imagens de fundo é preciso mais atenção, terá que duplicar imagens e entender como o criador pensou o original. Tenha paciência e seja persistente.

 

Um bom artigo para ajudar a fazer bem esse trabalho é do Blog da Ariane – Templates Novo Blogger:

 

Artigos Relacionados para melhorar seu layout:

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

7 Comentários

  1. Olá Marcos, estou observando teu tutorial, criei o blog teste, com o mesmo template= marca d’agua, só q. lá no html,ñ encontrei nehum dests códigos, está tdo diferente, será q. vc. poderia dar uma mãozinha, é q. preciso inserir outra sidebar.Desde já agradeço,
    no aguardo,
    D. Márcia

    Responder

    • Marcia,
      Você está usando o “Designer de modelo” que é padrão do Blogger. Esses códigos aqui são para quem usa templates antigos.
      Vc q está usando o templates novos, pode acessar o painel do Blogger normalmente e fazer as modificações direto no menu “Design” e depois clique na opção “Designer do modelo” para editar seu template como desejar.

      Responder

      • Marcos, desculpe a demora em responder à tua ajuda, é q. estive um pouco enferma,assim q. puder vou testar esta tua dica,qdo. conseguir, volto e comento ok?
        Muito obrigada!

        Responder

  2. Oi, voltei para te dizer que já inseri a nova sidebar, deitei e rolei, no blog-teste,aos poucos vou praticando mais.Até ajustei tamanho do blog etc. ùtil demais tuas dicas, e tem coisas nos novos templates que, além de mim,muitos ñ sabem.Por isto é importante vcs. continuarem com este trabalho de ajuda à nós novatos em blogs e outros. Assim q. fizer login novamente, vou inserir o link ferramentasblog lá,
    Abraços!!!!

    Responder

  3. Olá Marcos, Muito Bom Tutorial, parabéns mesmo, estou com um probleminha, eu consegui colocar, mas o link de inserir um gadget apareceu na mesma coluna que já tinha, porque meu blog só tem a coluna direita e gostaria de colocar outra na esquerda, mas o link de inserir um gadget apareceu justamente na coluna que já existia ai ficou dois links de inserir gadgets, poderia mim ajudar a colocar a coluna no lado esquerdo?…Dês de já agradeço,espero que entenda minha bagaceira…

    Abraços..

    Responder

Deixe um comentário

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