Pesquisar

Mostrando postagens com marcador colunas. Mostrar todas as postagens
Mostrando postagens com marcador colunas. Mostrar todas as postagens

Saiba como ..."Adicionar uma coluna no template"



"Usando um template Mínima do Blogger como base 
para este tutorial, entenda que a 

estrutura das 

colunas se apresenta desta forma, no

 CSS:"



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

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


Onde 
Outer-Wrapper é a maior DIV do 


template 

 

contém todas as outras 

(header, 

main, 

sidebar, 

footer) 




Main-wrapper é a coluna do post 






sidebar-wrapper

 é a coluna lateral (perfil).


Para adicionar uma nova coluna oposta

 a sidebar, é


 necessário primeiro 


criar espaço para ela 



dentro de


 Outer-wrapper. 


No template Mínima a largura de 

Outer-Wrapper (a largura de uma coluna 

está em 

width) é de 660px e a soma da largura de 


main-wrapper (410px) 

e sidebar-

wrapper(220px) 

dá 

um 

total de 630px 



Veja a imagem abaixo:




Então,  

para acrescentar uma nova coluna 

 é preciso aumentar o espaço,  

a largura de Outer-Wrapper.

Para acrescentar uma nova sidebar,


...copie o código abaixo 

...e acrescente logo após os códigos para 

sidebar-wrapper:



#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
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 */
}

Note que sidebar-wrapper tem float: right (flutua à direita)newsidebar-wrapper tem que terfloat:left (flutuação à esquerda).

Lembre-se:  

a soma da largura do post  
mais  
as duas colunas laterais  
tem que ser  menor 
do que o valor 

 width de Outer-Wrapper.

Não esqueça de somar 

bordas
o espaçamento 
que talvez você deseje que tenha entre as colunas.

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 imediatamente ANTES este: ▼

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

Importante: 


No HTML os elementos (DIVs
precisam ser dispostos 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>


Leia também: Como alinhar as colunas e textos do blog

fonte e créditos:                                                                                                                      
templatesparanovoblogger
 













Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares