Sidebar Vanessa S.
Adicionando Coluna (Sidebar) ao Template
Você já deve ter visto alguns templates que possuem 3 colunas (1 coluna na parte direita, a coluna da area do post centralizada , e 1 coluna na parte esquerda)
Eu vou ensinar aqui como você pode adicionar uma outra coluna sidebar ao seu template.
Adicionar nova coluna sidebar no blog:
O 1º passo é fazer um backup do seu Template para evitar transtornos. Vá em “design” >>”editar html” e clique em “salvar modelo completo”.
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
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;
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: 250px;
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 {
margin-left: 0px;
width: 250px;
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 */
}
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.
Confira também:
Personalizando a sidebar
Isso só serve para o blogger antigo , tem pro blogger novo?
Eba, consegui! Só que queria a nova coluna à direta do texto (deixando o texto entre duas colunas menores), ela ficou à esquerda da coluna pequena! HAHA
@?·?•?þ?uL??ho??•???- ADM:
Se você quiser aprender mais como personalizar a sidebar, leia este post e veja como aplicar estilos.
Obrigada pela visita e pelo comentário.
Olá G.Darkness, consegui colocar a coluna corretamente, so que tem um problema, não tou conseguindo editar os valores da nova sidebar, tipo colocar uma imagem atras do titulo, como faço nessa ocasião? Me ajuda, please! aguardo sua resposta!
E outra não sou de comentar muito, mas queria dizer q seu site tem me ajudado muito, parabéns pelo ótimo conteúdo que possui!