Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Sidebar Vanessa S.

Dividir a Sidebar em Colunas

Você já deve ter observado que aqui no meu blog as minhas colunas laterais são dividas com 1 coluna larga no topo(superior), 2 colunas laterais estreitas no centro e 1 coluna larga no bottom (inferior).
Com essa divisão, podemos aproveitar melhor o espaço no template, a sidebar fica com mais espaço para os elementos , o que nos dá mais opções de utilização.
Resolvi ensinar como eu dividi a sidebar em colunas.
Vou utilizar aqui nos exemplos as medidas que eu utilizo aqui no Template do blog, mas você deverá alterá-las de acordo com as medidas do seu template, não esqueça!

[alerta]Importante:
Os novo templates do Blogger , Designer de Modelo, possuem a opção de dividir a sidebar em colunas diretamente pelo painel do blogger, sem a necessidade de inserção de códigos, basta ir no menu “modelo >>personalizar” e escolher a opção de layout, salvar e pronto![/alerta]

 

COMO DIVIDIR A SIDEBAR EM COLUNAS NO BLOGGER:

Este tutorial se aplica apenas para usuários que utilizam os antigos templates padrões do Blogger (Minima), ou templates já modificados.



O 1º passo é fazer um backup do seu Template para evitar transtornos, se algo sair errado.

2º Passo – retire todos os widgets existentes na sua sidebar. Mova-os para o Footer ou para a área de post.

3º passo – Aplicar os estilos, determinando a largura de cada coluna e a flutuação, e para isso, vá em”modelo” em “Editar HTML”, (não precisa clicar em ‘Expandir modelos de widgets’), e procure pela tag abaixo:

#sidebar-wrapper {
width: 370px; /* ajuste a medida */
float: $endSide;
word-wrap: break-word;
overflow: hidden; 
}

E acrescente logo abaixo:

#sidebar-top {
width: 360px; /* ajuste a medida */
float: right;
}
#sidebar-left{
width: 180px; /* ajuste a medida */
float: left;
}

#sidebar-right {
width: 180px; /* ajuste a medida */
float: right;
}

#sidebar-bottom {
width: 360px; /* ajuste a medida */
float: right;
}

No Template Mínima, por exemplo, a #sidebar-wrapper, possui uma largura (width) de 220px;.
Você deve ajustar a medida das colunas de acordo com o modelo do seu template, não esqueça!

Agora devemos fazer com que seu HTML reconheça as colunas que você definiu os estilos, e para isso você deverá acrescentar a id a cada section do corpo HTML.
Localize o seguinte código:

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

E substitua por:

<div id='sidebar-wrapper'> 
 <b:section class='sidebar' id='sidebar-top' preferred='yes'/>
<div class='clear'/>

<b:section class=’sidebar’ id=’sidebar-left’ preferred=’yes’/>

<b:section class=’sidebar’ id=’sidebar-right’ preferred=’yes’/>
<div class=’clear’/>

<b:section class=’sidebar’ id=’sidebar-bottom’ preferred=’yes’/>
<div class=’clear’/>
</div>

Visualize para verificar se deu tudo certo e salve!

Pronto, agora seu template já tem a sidebar dividida em colunas.
Você pode personalizar as colunas de acordo com seu gosto, podendo acrescentar imagem no fundo(background), imagem no titulo etc. Se você quiser saber como personalizar esses elementos na sua sidebar, leia Como personalizar a Sidebar.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

6 Comentários

  1. DJF disse:

    olá.
    no meu não tem as tags descritas.
    comecei meu blog em dezembro de 2011.
    será que o template mudou?
    como faço para dividir agora?
    gostaria muito de fazer isso.
    se puder ajudar, agradeço.

  2. Mah disse:

    Oii. Obrigada pelo Tuto.
    Só consegui dividir a partir do seu tutorial, olhe que li vários outros.
    Então, realmente, obrigada.
    Beijos,
    Mah

  3. João disse:

    Olá!
    Este tutorial ajudou-me muito na hora de dividir a sidebar no template que ganhei na promoção do Sem Preceito.
    Já agora, ele ficou show de bola!

  4. ::Clau:: disse:

    @Avelino:
    Mas não precisa ter a sidebar dividida para que o código do menu em abas funcione não! Eu apliquei este recurso no template minima e ele não tem a sidebar divida e funciona normalmente. Deve ter ocorrido algum erro.

  5. Avelino disse:

    Eu também estou personalizando um template a partir do minima padrao do blogger e percebo que para fazer o menu em abas que você tem aqui(menu-em-abas-deslizante-na-sidebar) precisa ter divida em colunas na sidebar se não não tem como alterar o menu pois ele fica abaixo dos outro widgets e tem que deletar todos para ele aparecer.
    Obrigado pelos tutoriais.
    Abraço!

  6. Tinho disse:

    Ola!
    Graças a o seu tutorial estou conseguindo montar meu blog.
    Vlws….ahh Adoro within temptation tambem!! rsrsr

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.