Pesquisar

Mostrando postagens com marcador coluna. Mostrar todas as postagens
Mostrando postagens com marcador coluna. 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:

Saiba Como "Acrescentar Outra Coluna Sidebar (coluna horizontal)"


Pesquisa encontrada em templates e acessórios:


Vide a seguir:

"Bom, no La Blogueria encontrei essa dica" ..

Com ela você poderá colocar mais uma coluna ao blog

Só que essa coluna é horizontal ...
...e só tem sentido ser colocada,
 se você tiver um template 
onde as duas colunas fiquem de um lado só."







Clique para visualizar
Clique para visualizar







Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.









Primeiro vá até o HTML do seu blog e coloque o código abaixo antes de

  #sidebar-wrapper {








#widebar-wrapper {
width:360px;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}



Atenção: Esses dois códigos na cor verde é para que você faça as modificações necessárias como largura e lado das colunas.

360 px é a largura da coluna, vá trocando o número até que se ajuste ao tamanho desejado.

Caso no seu template as suas outras colunas fiquem do lado esquerdo, troque "right" por "left"


* Se você quer que a coluna fique acima das outras colunas:

Agora procure pelo código: <div id='sidebar-wrapper'> 

▲ ..."E acima dele cole o código abaixo."...▼






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



*Se você quer que fique abaixo das outras colunas:


Procure pelo código:

Agora procure pelo código: 

 <div id='sidebar-wrapper'>:

e ao final dele terá:

</b:section>
</div>


▲..."E abaixo dele cole o código"...▼


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





fonte e créditos: 
templateseacessorios







Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge