• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn