Criar um template Mínima de 3 colunas

24/09/2009

Criar um template Mínima de 3 colunas

01:26 Vera Lopes 27 comments

Se você quiser usar um template com a sua cara, poderá customizá-lo a partir de um modelo Mínima, que já está disponível no Blogger. O original, do Douglas Bowman, vem com 2 colunas mas, você poderá transformá-lo em um modelo de 3 colunas.

Se estiver começando um blog e usando o Mínima, esta mudança não afetará o seu conteúdo, seus widgets. Mas, se estiver usando um template diferente, personalizado, deverá salvá-los, antes de prosseguir com a instalação de uma nova coluna.

Então, antes de editar ou alterar modelo, faça o backup de seu modelo atual e salve seus widgets.

Vídeo | Como trocar o template salvando widgets

Feito isso, podemos começar:

Vá para o Painel e clique em >>Editar HTML.
Agora, encontre este trecho, no código HTML: ( use CTRL F , cole o código e clique em PRÓXIMO ou LOCALIZAR)

#sidebar-wrapper { width: 220px; 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 */ }

Copie o código abaixo e cole logo abaixo:

#left-sidebar-wrapper { width: 200px; 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 */ }

Use a barra de rolagem para cima e encontre este código:

#main-wrapper {
width: 410px;
margin-left: 25px;
float: $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 */
}

Adicione o trecho em vermelho.

Agora, vamos ajustar alguns valores, para adequar ao novo modelo. Troque os valores atuais pelos que estão destacados em azul:

#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 425px;
margin-left: 25px;
float: $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 {
width: 200px;
float: $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 */
}
#left-sidebar-wrapper { width: 200px; 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 */ }

Procure pelo trecho <div id='main-wrapper'> e cole o seguinte código, imediatamente acima dele.

Para retirar a borda do cabeçalho, procure pelo trecho abaixo e modifique o que está destacado em azul:

#header-wrapper {
width:880px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

Clique em Salvar modelo.

Agora clique na guia "Layout". Você vai precisar de arrastar alguns de seus elementos (widgets) da lateral direita para a barra lateral esquerda. Clique em visualizar e se estiver tudo certinho, como você quer, clique em SALVAR.

Veja um exemplo do modelo que fiz, para testar este tutorial: Mínima 3 Colunas

Se quiser retirar o navbar, que fica no topo do seu layout, leia: Navbar do Blogger

Posted in: Templates,Tutoriais

Estatísticas

24/09/2009