Sandro


 
InícioInício  FAQFAQ  BuscarBuscar  MembrosMembros  GruposGrupos  Registrar-seRegistrar-se  LoginLogin  

Compartilhe | 
 

 Adicionar coluna no blogger

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
sanrikares
Admin


Mensagens: 105
Data de inscrição: 24/06/2008
Idade: 23

MensagemAssunto: Adicionar coluna no blogger   Sab Jul 12, 2008 12:17 pm

Você tem um template que adora e não está nem um pouco afim de trocar ele só para conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar passo-a-passo como adicionar uma nova coluna no template.

Vamos nos familiarizar com o seguinte trecho do CSS do seu template (pode haver pequenas variações mas o básico é isso):

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

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

Onde Outer-Wrapper contém tudo o que está no template, main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar, este código:

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

Atenção para as medidas: 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 e 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='yes'>
</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='yes'>
</b:section>
</div>

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

Ou seja, Newsidebar flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita e esta disposição é obedecida no HTML.
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://sanrikares.forumeiros.com
 

Adicionar coluna no blogger

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1

 Tópicos similares

-
» ADICIONAR AMIGOS NO PERFIL
» CC 2030
» Bonelli no Montejunto??
» Páginas pessoais, blogs e galerias virtuais
» ALIMENTAÇÃO DOS RECEN NASCIDOS

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Sandro :: Tutoriais-