Pular para o conteúdo principal

Adicionar colunas no template

Esse tutorial eu encontrei no TEMPLATES PARA NOVO BLOGGER e resolvi reescrevê-lo.
Bom, para começar vá em Layout > Editar HTML, e clique em Baixar Modelo Completo.
Depois, procure por essa parte no template:

/* Outer-Wrapper
----------------------------------------------- */
#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;
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;
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 */
}

Atenção!
Outer-Wrapper > Todo o template;
Main-wrapper > coluna do post;
Sidebar-wrapper > é a coluna lateral.

Adicione o código a seguir embaixo de sidebar-wrapper:

#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 */
}

Fique atento ao valor de width, em Outer-wrapper.
A soma de width em main-wrapper mais as duas colunas laterais nao deve ser maior do que width de outer-wrapper.
Ex:
MAIN { width: 400px; }
SIDEBAR { width:150px; }
NEWSIDEBAR { width:150px; }
Some os 3 valores de with, no exemplo vai dar 700. Isso quer dizer que, outer-wrapper deve ser maior que 700px.
Agora desça a página até encontrar esta parte do código (HTML):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

E cole antes este:

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

Visualize para ver se não há erros, depois salve.

Importante:
No HTML os elementos devem estar na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:
<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section>
</div>
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
</b:section>
</div>
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section>
</div>
Então, NEWSIDEBAR fica na esquerda, MAIN-WRAPPER no centro, e SIDEBAR na direita.

É isso! Experimentem. Se ficou alguma dúvida ou não conseguiu adicionar a coluna, deixe um comentário. Até a próxima!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.