Segundo o Google Analytics, o post sobre Adicionar Coluna no Template é disparado o mais procurado aqui no blog. No entanto, é o que mais gera dúvidas também, campeão de comentários (publicados ou não) e de insucessos nas tentativas dos leitores blogueiros. Por isso, vou postar mais uma vez sobre o assunto, esperando ser tão clara quanto possível, para que não restem dúvidas nem dificuldades, ok?
Vamos lá.
Quando postei pela primeira vez sobre o assunto, eu me baseei nos meus próprios templates e na disposição dos códigos encontrados neles. Mas acontece que uma porção de leitores que usam outros modelos de templates se viram perdidos com a sequência que mostrei. Não tem como eu analisar todo tipo de templates por aí, então o que vou fazer é mostrar o Mínima do Blogger (que é o que uso como base para os meus) e ensinar a inserir uma coluna extra nele. A novidade aqui é que vou ensinar tres tipos de posicionamento da nova coluna: sidebar-main-sidebar; main-sidebar-sidebar e main- sidebar sobre sidebar. (sidebar=coluna do perfil, main=coluna do post).
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 à Sidebar e cole abaixo do mesmo e altere o nome de Sidebar para NewSidebar, 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)
/
0 comentários:
Postar um comentário