sexta-feira, 16 de setembro de 2011
Agora você precisa se familiarizar um pouco com o seguinte trecho do codigo em seu Template para poder entender a funcionabilidade dele. Aconselho que leia este artigo:
Elementos Básicos do Blogger.
Agora vejamos como adicionar uma nova coluna sidebar ao template:
Procure por esta parte do codigo HTML (use ctrl+f se preferir):
#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 */ }Lembre-se que Outer-Wrapper é onde contém tudo o que está no template, main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (coluna do perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar-wrapper, 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 */ }Se você quiser aplicar estilos a essa nova coluna, como cor de fundo, por exemplo, você deverá incluir a linha de código nesta parte.
Por exemplo: aplicar cor de fundo, inclua:background: #000;
na linha #newsidebar-wrapper
Por exemplo: aplicar cor de fundo, inclua:background: #000;
na linha #newsidebar-wrapper
Atenção: Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora procure esta parte do código HTML:
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> </b:section> </div>e cole ANTES dela:
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'></b:section> </div>Lembre-se que os elementos precisam estar dispostos na ordem estabelecida no HTML.
Se a 'Newsidebar' tem float: left; (flutuação à esquerda) o elemento 'div' 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>Neste exemplo, newsidebar-wrapper (nova coluna) flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita.
Editando a largura das colunas:
Procure no código:
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 1000px; margin:0 auto; padding:0px; text-align:left; font: #000000; background-color: #ffffff; } #main-wrapper { margin-left: 5px; width: 450px; float: left; Lembre-se que:
#main-wrapper se refere à coluna do post, se você quiser aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.#sidebar-wrapper se refere a coluna do perfil, os valores de WIDTH devem ser alterados. Lembre-se de configurar a largura que está estipulada em #outer-wrapper , sem ultrapassá-la.#newsidebar-wrapper se refere a nova coluna. Os valores de WIDTH devem ser alterados de acordo com o mesmo que você estabeleceu na coluna #sidebar-wrapper.
Se você aumentar a largura das colunas sidebar, deve observar qual a largura que está estipulada em outer-wrapper e em main-wrapper, e deve ajustá-las. Caso contrário seu template pode ficar com uma aparência desconfigurada.
Dica: O ideal é estabelecer uma largura width:1000px para outer-wrapper,
width:450px para main-wrapper e width:250px para sidebar.
