Sidebar com 2 colunas para Blogger

Um blog ou site é comumente dividido em 04 áreas. Cabeçalho, barra lateral (menus), conteúdo e rodapé, em ingles Header, sidebar, content, footer. A sidebar desempenha especial função, pois nela estão opções de navegação, perfil, propaganda, feed, e tal. Também tem função estética. Portanto é importante que você de a devida importância a esta área. Neste artigo vamos adicionar uma nova coluna a sidebar, dividindo uma coluna em dois.

Siga os 4 passos deste tutorial, o resultado será semelhante ao da imagem.

Sempre faça o backup.

Antes de fazer quaisquer modificações em seu blogger/blogspot, é essencial que você faça um backup do seu modelo existente. Então, se você fizer quaisquer erros, ou decidir que não gostou do novo visual, você pode facilmente voltar ao layout anterior.

Para fazer backup do seu modelo existente, vá para o Modelo > Editar HTML. No seu Painel do Blogger, e clique em "Baixar modelo completo", link na parte superior da página. Você pode então salvar o seu modelo como um arquivo XML para o seu computador.

OBSERVAÇÃO: Não sou responsável por quaisquer problemas que venha ocorrer com seu blogger/blogspot, durante o procedimento usei o Layout Minima (o mais simples e sempre indicado nestes tutorais). Boa sorte.

Mova todos os widgets existentes da seção Sidebar.

Na seção Layout do seu Painel do blogger/blogspot, mova todos os elementos que estão presentes em sua seção de sidebar para o cabeçalho (header), rodapé (footer) ou qualquer outro ponto. Isto é apenas temporário, você pode movê-los novamente mais tarde quando tivermos terminado as modificações. Mais importante, isso garante que você não perca suas widgets durante a modificação, e torna-se muito mais fácil para se completar.

Modificando o código do blogger/blogspot

Vá para Modelo > Editar HTML no seu Painel do Blogger, e não marque a caixa verificar o "Expandir modelos de widgets" (isso simplifica o processo).

Agora você precisa encontrar esse código no seu modelo:

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

Substitua todo o trecho de código destacado em vermelho, pelo código abaixo:

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

<div class='sidebar-column' id='sidebar-column-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>

<div class='sidebar-column' id='sidebar-column-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>

<div style='clear:both;'/>

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

</div>

<!-- End Sidebar -->

Adicionando estilo a nova seção Sidebar

Mais uma vez, abra a seção Editar HTML no seu Painel do Blogger. Localize o seguinte trecho de código:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Substitua todo o código destacado em vermelho acima pelas linhas de código abaixo:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align:left;
float: $startSide;
width:100%;
clear:both;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.sidebar-column {
color: $sidebartextcolor;
line-height: 1.5em;
width:50%;
}
#sidebar-column-left {
float: $startSide;
padding: auto 10px;
}

#sidebar-column-right {
float: $endSide;
padding: auto 10px;
}
#sidebar-top{
width:100%;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-bottom{
width:100%;
word-wrap: break-word;
overflow: hidden;
}

Espero que deva ter ocorrido tudo na paz. Qualquer dúvida ou problema, comente. Fui!