Adicionar uma nova sidebar em um template para Blogger

Adicionar uma nova sidebar em um template para Blogger é uma das dúvidas mais comuns entre os usuários da plataforma para blogs de Google. Adicionar uma segunda sidebar varia em complexidade de acordo ao layout que se trata, assim, em alguns templates só necessitamos trocar algumas linhas de css, outros necessitarão de uma remodelação total.
O processo é mais ou menos o seguinte:

1. Analisar a estrutura e estilos do template.
2. Adicionar uma nova sidebar, ou seja, a nova zona para agregar os gadgets.
3. Modificar estilos.

Para seguir sem problemas este e qualquer tutorial que implica fazer modificações na estrutura de um blog ou site web é muito recomendável saber algo de html e css. Então:
Analise a estrutura e estilos do template

A maioria dos templates, e especialmente os do Blogger, têm uma estrutura muito similar, um header (cabeçalho) com título e descrição, um corpo com a coluna principal e uma sidebar (barra lateral) e um footer (rodapé da página) com créditos e outras informações.
Neste caso, o que nos interessa é o corpo, onde se encontra a coluna principal e a sidebar, no código do Blogger (Layout / Editar HTML) ele se apresenta assim:

<div id='content-wrapper'> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <!-- Código de los gadgets o widgets del sidebar --> </b:section> </div> </div>

Varia um pouco de template para template, porém geralmente é muito similar ao anterior. Tanto main-wrapper (coluna principal) como sidebar-wrapper (conteúdo da sidebar) estão definidos por estilos css que determinam seu tamanho, fundo e outras características. Assim, a primeira coisa será averiguar estas características buscando algo como:

#main-wrapper { float:left; width:620px; /*.... outros atributos ... */ } #sidebar-wrapper { float:right; width:300px; /*.... outros atributos ... */ }

Nota: Seguramente não os encontraremos juntos nem exatamente iguais.

Aqui é importante ver a largura (width) de cada elemento, pois para agregar uma nova barra teremos que modificar a distribuição. Ao somar as larguras no código de exemplo se obtém um total de 920px, o qual será o espaço disponível para a coluna principal e as sidebars.

Adicionando uma nova sidebar.

Adicionar uma nova sidebar no blogger é muito simples, seus elementos estão definidos por “section” que ao incluirmos no código já podem conter gadgets (elementos de página). O código de uma nova sidebar é algo como:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

E para adicionar uma nova sidebar, só precisamos adicionar este código imediatamente depois da sidebar existente:

<div id='content-wrapper'> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <!-- Sidebar existente --> <b:section class='sidebar' id='sidebar' preferred='yes'> <!-- Código de los gadgets o widgets del sidebar --> 
</b:section> <!-- Nova sidebar --> <b:section class='sidebar' id='sidebar2' preferred='yes'></b:section> </div> </div>

Temos que ter cuidado para que o ID da nova sidebar não exista em outro elemento “section”, é por isso que no exemplo aparece como “sidebar2″. A classe (class) pode repetir-se, e no caso das sidebars é conveniente que repitam-se. Como é uma zona sidebar, não necessita ter código de gadgets, estes se integrarão automaticamente quando adicionarmos um novo gadget em “Elementos de página”.

Com isto já teremos uma nova sidebar, porém, como o template não esta preparado seguramente ficará deformado, então faremos algumas modificações.

Modificar estilos

Já sabemos o espaço total disponível e temos a nova sidebar, agora teremos que mudar e determinar o tamanho de cada elemento. Seguindo o exemplo; main-wrapper reduziremos a 540px e sidebar-wrapper que agora contém ambas sidebars, aumentaremos para 380px. Por exemplo:

#main-wrapper { float:left; width:540px; /*.... outros atributos ... */ } #sidebar-wrapper { float:right; width:380px; /*.... outros atributos ... */ }

Deste modo o espaço disponível para ambas sidebars é de 380px. É comum que ambas tenham o mesmo tamanho, elas ocuparão 50% do espaço cada uma. A partir dos IDs de cada sidebar definimos o tamanho de cada uma e sua posição "float" (direita - esquerda). Dentro do conteúdo sidebar-wrapper, adicionaremos os estilos:

#sidebar { width:50%; float:left; /*.... atributos que considere necessários: padding, margin, etc ... */ } #sidebar2 { width:50%; float:right; /*.... atributos que considere necessários: padding, margin, etc ... */ }

Com isto já teremos 2 sidebars com tamanho de 190px cada uma, capazes de suportar gadgets.

Observações

Alguns templates podem ter problemas ao trocar o tamanho da sidebar ou coluna principal, sobre tudo aqueles baseados em imagens fixas, que obviamente não mudam de tamanho ao reduzir-se a largura. Neste caso editem as imagens com photoshop para adapta-las ao novo tamanho.

Conclusão

Em geral este processo pode ser complicado, sobre tudo se não tiver conhecimentos ao menos básicos de css ou o template tiver uma estrutura complexa. Se for o caso, tente aprender ao menos o básico em css antes de fazer modificações no seu layout ok?
Fonte: http://usuariovirtual.blogspot.com