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

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.

 

 

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:

• Adicionar uma coluna no Template

 

Artigos Relacionados para melhorar seu layout:

• Inserir Menu Horizontal – Linkbar – no seu Blog
• Templates para Blog / Blogger
• Mudar cores e fontes do Layout do Blog