Adicionando Coluna Sidebar ao Template
Autor: Dark-x | Publicado: 2011-09-16T14:20:00-07:00

&nbsp;1º passo é fazer um backup do seu Template para evitar transtornos. Vá em "design" &gt;&gt;"editar html" e clique em "salvar modelo completo".


Agora você precisa se familiarizar um pouco com o seguinte trecho do codigo em seu Template para poder entender a funcionabilidade dele. Aconselho que leia este artigo:
Elementos Básicos do Blogger.

Agora vejamos como adicionar uma nova coluna sidebar ao template:

Procure por esta parte do codigo HTML (use ctrl+f se preferir):
 #outer-wrapper { width: 900px; margin:0 auto; padding:0px; text-align:left; font: $bodyfont; background-color: #bgcolor; } #main-wrapper { margin-left: 3px; width: 468px; float: left; (ou $startSide) 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 */ } #sidebar-wrapper { margin-right: 0px; width: 210px; float: right; (ou $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 */ }


Lembre-se que&nbsp;Outer-Wrapper&nbsp;é onde contém tudo o que está no template,&nbsp;main-wrapper&nbsp;é a coluna do post e&nbsp;sidebar-wrapper&nbsp;é a coluna lateral (coluna do perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar-wrapper, este código:
 #newsidebar-wrapper { margin-left: 0px; width: 210px; float: left; 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 você quiser aplicar estilos a essa nova coluna, como cor de fundo, por exemplo, você deverá incluir a linha de código nesta parte.
Por exemplo: aplicar cor de fundo, inclua:background: #000;
na linha&nbsp;#newsidebar-wrapper

Atenção: Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora procure esta parte do código HTML:
 &lt;div id='main-wrapper'&gt; &lt;b:section class='main' id='main' showaddelement='no'&gt; &lt;/b:section&gt; &lt;/div&gt;

e cole ANTES dela:
 &lt;div id='newsidebar-wrapper'&gt; &lt;b:section class='sidebar' id='newsidebar' preferred='yes'&gt;&lt;/b:section&gt; &lt;/div&gt;

Lembre-se que os elementos precisam estar dispostos na ordem estabelecida no HTML.
Se a 'Newsidebar' tem float: left; (flutuação à esquerda) o elemento 'div' deve ser colocado no HTML ANTES da 'div' Main-Wrapper, ficando assim:
 &lt;div id='newsidebar-wrapper'&gt; &lt;b:section class='sidebar' id='newsidebar' preferred='yes'&gt; &lt;/b:section&gt; &lt;/div&gt; &lt;div id='main-wrapper'&gt; &lt;b:section class='main' id='main' showaddelement='no'&gt; &lt;/b:section&gt; &lt;/div&gt; &lt;div id='sidebar-wrapper'&gt; &lt;b:section class='sidebar' id='sidebar' preferred='yes'&gt; &lt;/b:section&gt; &lt;/div&gt;

Neste exemplo, newsidebar-wrapper (nova coluna) flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita.
Editando a largura das colunas:
Procure no código:
 /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 1000px; margin:0 auto; padding:0px; text-align:left; font: #000000; background-color: #ffffff; } #main-wrapper { margin-left: 5px; width: 450px; float: left;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

Lembre-se que:

#main-wrapper&nbsp;se refere à coluna do post, se você quiser aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em&nbsp;WIDTH.#sidebar-wrapper&nbsp;se refere a coluna do perfil, os valores de WIDTH devem ser alterados. Lembre-se de configurar a largura que está estipulada em&nbsp;#outer-wrapper&nbsp;, sem ultrapassá-la.#newsidebar-wrapper&nbsp;se refere a nova coluna. Os valores de WIDTH devem ser alterados de acordo com o mesmo que você estabeleceu na coluna #sidebar-wrapper.

Se você aumentar a largura das colunas sidebar, deve observar qual a largura que está estipulada em outer-wrapper e em main-wrapper, e deve ajustá-las. Caso contrário seu template pode ficar com uma aparência desconfigurada.

Dica: O ideal é estabelecer uma largura width:1000px para outer-wrapper,
width:450px para main-wrapper e width:250px para sidebar.