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:

.

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.