Adicionar Colunas na Barra Lateral do Blog [Sidebar dividida]

coluna-sidebar-dividida-blogger Para aqueles que querem fazer modificações no template e personalizar o blog, sempre se busca mais espaço para a barra lateral (sidebar). Gostaria de ensinar aqui como adicionar uma parte da sidebar dividida em duas colunas sem precisar adicionar outra barra lateral extra, aproveitando exatamente o espaço que já se tem. Qualquer modificação em um template é complicada, mas essa oferece um recurso bem interessante é muito útil.

 

Pedimos que se leia esse artigo com atenção e siga as recomendações à risca. Só faça modificações depois de aprender o funcionamento básico desse recurso. O que mostraremos abaixo modifica permanentemente um template e retroceder pode ser impossível sem um backup.

 

Passos iniciais.

Tudo o que vamos descrever abaixo é como adicionar uma nova sidebar, por isso é importante ao menos ler o artigo citado acima.

 

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

 

O resultado esperado para as mudanças que vamos apresentar.

Queremos adicionar uma coluna dividida junto à coluna original do blog. Assim a sidebar terá mais espaços para elementos e dará mais opções de utilização. Veja na imagem como ficará.

 

coluna-sidebar-dividida-blogger

 

Com isso seu blog terá mais espaços disponíveis e você poderá ter uma coluna lateral (sidebar) mais larga e com um uso mais diverso. Eu particularmente gosto desse formato, pois há gadgets e outros elementos que são bons para colunas largar, mas há outros (como os Marcadores) que é melhor visualizado em uma sidebar mais estreita.

 

Como adicionar uma Sidebar Dividida.

Precisamos adicionar os códigos CSS que determinam o formato e tipo de elementos que vamos adicionar. Para isso vá ao código-fonte de seu template, abrindo “Layout” ~> “Editar HTML”. Na janela dos códigos procure por:

 

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

Se estiver usando um outro modelo de template para testes que não seja o Minima, então procure por algo similar, mas que começa com “#sidebar-wrapper”, pois é o que determina a barra lateral original.

 

Exatamente Abaixo dessa parte indicada adicione o seguinte:

 

#coluna-esquerda {
  width: 48%;
  float: left;
}

#coluna-direita {
  width: 48%;
  float: right;
}

 

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

 

O que está indicado de verde refere-se à coluna dividida e as porcentagens determinam o quanto de espaço vão ocupar da largura total da sidebar. Aqui no exemplo a sidebar mede 220px.

No que está destacado de vinho (roxo) é a sidebar duplicada com nome novo e é o que será a continuação abaixo das colunas divididas. Entenda: a continuação é a coluna original duplicada e com um nome novo, para tanto, basca copiar e colar o código da original e tem que ter a mesma medida de largura.

 

Agora procure pela seguinte parte:

 

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

Aqui vamos colar os códigos que virão a seguir (isso não pertence ao código e é apenas uma marcação).
      </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.

 

No lugar da marcação em vermelho deverá ser colado o código a seguir que vai inserir as novas colunas. Nessa parte é preciso ter muita atenção para não errar.

 

<!– SideBar Dividida início –>
<b:section class=’sidebar’ id=’coluna-esquerda’ showaddelement=’yes’>
</b:section>

<b:section class=’sidebar’ id=’coluna-direita’ showaddelement=’yes’>
</b:section>

<div style=’clear: both;’/>
<!– SideBar Dividida final –>

<!– Continuacao da sidebar início –>
<div id=’sidebar-wrapper-nova’>
        <b:section class=’sidebar’ id=’sidebar-nova’ preferred=’yes’>
</b:section>
      </div>
<!– Continuacao da sidebar final –>

 

Agora é só salvar o modelo e v
er o resultado.

Espero que tenha ajudado e faça todos os testes possíveis antes de tentar aplicar isso definitivamente em seu blog original. É preciso tempo e paciência para fazer tudo funcionar.

 

Artigos Relacionados para melhorar seu layout:

25 Comentários

  1. @Mikael,

    Basta duplicar o código que está entre

    SideBar Dividida início
    …..
    SideBar Dividida final

    E colocar abaixo de
    Continuacao da sidebar final

    . Só isso.

    Responder

  2. OK, obrigado, ainda estou tentando fazer esse que vc explicou no tutorial, ta muito difícil, pq o meu template é diferente e se torna um pouco dificultoso pra encontrar as linhas corretas, mas eu vou continuar tentando.
    Valeu!

    Responder

  3. @Mikael,

    Essa modificação pode ser feita em qualquer template. O Minima é apenas o exemplo padrão para ajudar a identificar os elementos em outros templates.
    Como é o seu caso agora: "sidebar-wrap" deve ser a mesma coisa. Por isso é importante fazer testes em seu modelo de layout em um blog alternativo antes de testar as mudanças no seu blog original.

    Responder

  4. Oi Marcos Lemos, vc mandou:

    " Basta duplicar o código que está entre
    SideBar Dividida início
    …..
    SideBar Dividida final
    E colocar abaixo de
    Continuacao da sidebar final

    . Só isso.

    Eu fiz mas a mensagem que apareceu foi essa:
    "Mais de uma seção encontrada com o id: coluna-esquerda. Os IDs de seção devem ser únicos e exclusivos."

    Poderia me explicar como devo proceder?
    Obrigado!

    Responder

  5. Brother… valeu mesmo. Eu já tinha a sidebar divida, só faltava a continuação! adaptei a minha necessidade e deu certo!

    Responder

  6. Olá Marcos tudo bem?
    Tem como adicionar essas colunas em um template da Ju, do DB? Não consigo de jeito nenhum!

    Responder

  7. @Maicon,

    Tem jeito sim.
    Mas como eu disse no artigo, é preciso aprender bem como fazer e testar. Uso aqui o Minima como modelo padrão.
    Para usar em outros templates vc terá que criar um blog de testes e aprender as particularidades dele antes de aplicar em seu blog principal.

    Responder

  8. Muito obrigada!
    Super bem explicado! Entendi tudo perfeitamente e consegui aplicar no meu Blog!

    E o Post sobre as Medidas de um Template do Blogger, me ajudou demais também! Aprendi a customizar o as larguras.. E ficou show!

    Parabéns! =)

    Responder

  9. Oi, eu postei um comentário, mas parece que ele foi negado! ôõ

    Então, eu consegui dividir tudo certinho, mas a continução da "primeira" sidebar (a maior) fica meio que centralizada e acaba não aparecendo. Como eu resolvo isso?

    Olha o print: http://i36.tinypic.com/2gwyq0n.jpg

    Agradeço a paciência e o tutorial.

    Responder

  10. @Armadastyx Team,

    Os comentários só são aprovados quando estão de acordo com nossa Políticas para Comentários.

    Sobre sua dúvida:
    Veja se está colando os códigos no lugar indicado e seguindo os passos do tutorial à risca usando devidamente a sua estrutura.
    Recomendo ainda que faça testes em um blog só para testes antes de tentar aplicar isso no seu blog original.

    Como disse no texto, seguimos o modelo do template Minima, o que pode variar um pouco conforme outros templates e a estrutura de código. Assim, veja bem como funcionar melhor em seu modelo e, qualquer dívida solicite ajuda do criador de seu template para solucionar questões específicas na mudança.

    Responder

  11. Muito bom! Esse tutorial funciono perfeitamente no meu blog tava atrás disso a dias. Ate que achei aqui no Ferramentas Blog. Parabéns Marcos Lemos tutorial muito bem feito. E obrigado pela ajuda como sempre heheh falou.

    Responder

  12. Cara, há tempos procurava esse recurso para implementar no meu blog, você me salvou, valeu demais…

    @jmpsousa

    Responder

  13. Pingback: Personalizar Links de Navegação do Blogger | [ Ferramentas Blog ]

Deixe um comentário

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