transforme em 03 (três) colunas o template Mínima de 02 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."

"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
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"










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.


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
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

0 comentários:

Postar um comentário

Deixe teu comentário aqui e volte para ler a resposta. Caso deseje deixar seu e-mail e enviar sua dúvida em private, escreva para hhylenny@hotmail.com
Grata desde já,
edilene-amor

Pesquisar

Seguidores