"Adicionar uma coluna no template"
post em resposta
às dúvidas de
às dúvidas de
Rita Jakubovic
"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: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 3px;
width: 468px;
float: left; (ou $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 {
margin-right: 0px;
width: 210px;
float: right; (ou $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 {
margin-left: 0px;
width: 210px;
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 */
}
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.
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: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 3px;
width: 468px;
float: left; (ou $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 {
margin-right: 0px;
width: 210px;
float: right; (ou $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 {
margin-left: 0px;
width: 210px;
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 */
}
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):
e cole imediatamente ANTES este:
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:
Ou seja, Newsidebar flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita e esta disposição é obedecida no HTML.
Leia também: Como alinhar as colunas e textos do blog
Artigos Relacionados
- Colocando margem nos widgets do blogger
- Colocando imagens em listas (marcadores)
- Customizar o gadget Slide
- Personalizando o gadget Perfil
- Como criar uma pagina de abertura para o Blogger
- Menu com imagens e efeito hover
- Usando o Widget de Imagem para destaques no blog
- Artigos Relacionados no Blogger
- Resumo na página inicial com posts de cores diferentes
- Mais menus horizontais
- Colocando um slide no blog
- Convertendo tema do Wordpress para o Blogger II
- Convertendo tema do Wordpress para o Blogger I
- Mostrar data em todos os posts de um mesmo dia
- Adicionar ou remover marcadores
- Ocultar o blog quando estamos fazendo modificações
- Firebug encontrando os codigos do seu template
- Animeted Collpase listas expandiveis
- Como fazer um template para o Blogger Listas e Links
- Marcadores como lista expansível"
***
o post, de hoje, os créditos são para:
...onde encontrei a pesquisa feita.
Obrigada.
Obrigada.
0 comentários:
Postar um comentário
Mensagem do formulário de comentário: