Adicionando coluna no template

Eu vou ensinar aqui a adicionar uma nova coluna ao blog,vou mostrar 3 tipos de posicionamento de colunas,então vamos começar:

Vá no codigo do seu template

Sidebar - Main - Sidebar:

*Primeiro Passo (para todos os casos)

Encontrem este trecho do código do template:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
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 {
width: 190px;
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 */
}

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


Outer-wrapper mostra a medida total que terá seu template, a largura dele. A largura das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna 'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o valor em width que está em Outer-wrapper. No Mínima, a largura é só de 660px. Se você deseja tres colunas no seu template (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie todo o trecho que se refere à newsidebar e cole abaixo do sidebar, como mostrado acima, em vermelho. Note que destaquei onde está float: left; Para que uma coluna fique à direita e outra à esquerda da coluna do post (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam estar em lados opostos.

Muito bem. Agora determine as medidas que terão as colunas. Não se esqueça que o valor total não poderá ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento entre as colunas.

*Segundo Passo (para todos os casos)

Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


<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: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'/>
< /div>

Acrescente a parte em vermelho, que se refere a coluna criada, antes de main-wrapper. Por que antes? Por que está determinado que esta coluna ficará à esquerda da coluna do post (foi determinado lá em cima, em float: left ok?), ou seja : newsidebar-main-sidebar.

Main - Sidebar - Sidebar:

Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
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 {
width: 190px;
border: 1px solid $bordercolor;
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 */
}

#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
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 */
}

Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.


Main - Sidebar sobre Sidebar

Determine que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por exemplo: Determine o valor em width de Outer-Wrapper para 800px, para Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar) 220px. A falta de espaço obrigará uma das colunas a descerem. Mas não se esqueça de detrminar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?

10 comentários:

Andréia Santana disse...

Tentei várias dicas pra add coluna no meu blog, e só agora com sua dica que consegui. Obrigado.

Juliana Sardinha disse...

A maioria dos seus textos foram copiados de outros blogs e isto é muito mal visto na Blogosfera. A chance de vc fazer sucesso com este blog é ZERO. Mas vou acreditar que vc é INICIANTE e não sabia disto....então comece a colocar os créditos aos verdadeiros autores dos artigos e aí sim vc poderá ingressar no mundo dos blogueiros.

Grupo Agroecológico Craibeiras disse...

cara na moral nao consegui, me da uma força ae :

WonderWoman disse...

No meu a coluna fico torta, e eu fiz o tutorial direitinho

WonderWoman disse...

Esta errado os valores

é, infelizmente estou vendo que este tutorial foi copiado de outra pessoa!

Samuel disse...

Da pra você colocar os créditos ai cara?

para de ser bobão, o que custa colocar os créditos das pessoa que realmente tiveram muito trabalho pra fazer o tutorial. E ainda por cima tira os créditos do template.
São pessoas assim que poluem a blogosfera!
Mais como sou bonzinho vou colocar os créditos aki mesmo:

Template orinalmente feito por N.Design Studio e adaptado ao blogger por Blog and Web.

Quem quizer bons tutoriais e muita diversão visite os blogs:

Dicas blogger
Templates para novo blogger
Usuário compulsivo

E vááááárioos outros,não vou citar todos mais tem muitos.

Vá nos parceiros e procure por blogs de verdade!

Marcos França disse...

Fantástica essa dica. Deu tudo certo. Mas me diz uma coisa, como faço para criar uma opção de um Gadget do tamanho das duas colunas juntas logo abaixo das colunas menores?
Ou seja, gostaria de possuir duas colunas no perfil e uma coluna única logo abaixo que tivesse o tamanho de ambas. De antemão já agradeço a atenção. Aguardo retorno.

Abraços,
Marcos

ĐaηιℓσøØ  disse...

Juliana Sardinha disse...

A maioria dos seus textos foram copiados de outros blogs e isto é muito mal visto na Blogosfera. A chance de vc fazer sucesso com este blog é ZERO. Mas vou acreditar que vc é INICIANTE e não sabia disto....então comece a colocar os créditos aos verdadeiros autores dos artigos e aí sim vc poderá ingressar no mundo dos blogueiros.


Porque não vai cata Sardinha kkkkk
Esse blog é com sim e eu aprendi coisas que estão no meu blog com esse aqui então olha la no meu www.tutoriais-downloads-uzumaki.blogspot.com

Soft-Net disse...

Ola tudo bem, eu estou com um problemasso, e pra falar a verdade eu nem sei por onde começar, eu troquei de template um dia desses, e estava indo tudo bem, até que a coluna do lado direito do template foi pra baixo das pastagens, já nem sei o que fazer para colocar essa coluna no lugar por favor me ajude o blog é www.wylliampablo.blogspot.com/ me mande também um e-mail willie_pablo@hotmail.com se for possível me ajude até mais...

UJS Quebrangulo disse...

oi galera! blz? espero q sim.
olha eu queria pedir um coisa pra vcs . eu queria q por favor vcs mandace ai pra mim um codigo de mapa de blog pra mim .
vlw
meu e-mail : willians.braw@bol.com.br