Já publiquei tutoriais ensinando a colocar colunas extras no Header e no Footer. Em breve publicarei tutoriais para dividir o container da sidebar, do main-wrapper e dos posts também em várias colunas. Entender as propriedades float e clear é essencial para você aprender a criar colunas em qualquer um dos containers do Blogger.
A propriedade float, a maioria de vocês já deve ter aprendido como funciona. O Blogger utiliza algumas variáveis para esquerda e direita, que são: $startside ou $startSide para esquerda e $endside ou $endSide para direita.
Quando você vê uma coluna flutuada à esquerda no código CSS do template, ela estará configurada assim:
#id da coluna {
float: left;
}
ou
#id da coluna {
float: $startside;
}
ou
#id da coluna {
float: $startSide;
}
E à direita:
#id da coluna {
float: right;
}
ou
#id da coluna {
float: $endside;
}
ou
#id da coluna {
float: $endSide;
}
Para adicionar colunas em qualquer container, precisamos criar uma div e uma identificação, portanto uma div id. As id não podem ter nomes repetidos no código do template, então você só pode criar 1 div id='sidebar-left' por exemplo.
Você pode colocar as colunas dentro de containers já existentes no código do template (exemplo a div id='footer-wrapper') ou criar novos containers dentro do container existente (ex: div id='footer-column-container')
Para reduzir o número de div a serem adicionadas, utilizar os containers já existentes é mais apropriado.
Outra dica para reduzir o número de div (e portanto, reduzir código) é aproveitar as class b:section do Blogger.
Por exemplo, se você quer criar 3 colunas laterais no Footer, faça um código assim:
<div id='footer-wrapper'> <b:section class='footer' id='footer-left' preferred='yes'/> <b:section class='footer' id='footer-center' preferred='yes'/> <b:section class='footer' id='footer-right' preferred='yes'/> </div>
Compare o código fonte de seu template (Ctrl+U ou Exibir - Código Fonte) e o código quando você está na aba "Editar HTML": tudo o que aparece em b:section no "Editar HTML" se transforma em div class='(nome-da-coluna) section' no código fonte.
Exemplo:
Em "Editar HTML":
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
No código fonte :
<div class='header section' id='header'>
Como essas section são div, não há necessidade a princípio de criar div adicionais.
Bem, criamos as div id que desejamos nesse nosso exemplo do Footer. Precisamos colocar agora a propriedade clear para limpar as flutuações.
Vamos entender isso melhor: Nesse Footer eu quero que essas 3 colunas fiquem ao lado uma da outra, e não quero permitir que nenhuma outra coluna (por exemplo, uma coluna de créditos abaixo do footer) possa escorregar para o lado delas se encontrar espaço (os espaços vazios sempre são ocupados se não colocarmos a propriedade clear).
Então vamos criar uma class para fazer isso e colocar no código do nosso Footer:
<div id='footer-wrapper'> <b:section class='footer' id='footer-left' preferred='yes'/> <b:section class='footer' id='footer-center' preferred='yes'/> <b:section class='footer' id='footer-right' preferred='yes'/> </div> <div class='clear'/>
Note que coloquei a propriedade clear depois que fechei a div do container footer-wrapper, porque não quero nenhuma coluna à direita ou esquerda do container todo.
Quando colocamos outras colunas dentro do container além das laterais, temos que aplicar clear dentro do container, para evitar que uma coluna escorregue para o lado da outra. Exemplo:
<div id='footer-wrapper'> <b:section class='footer' id='footer-top' preferred='yes'/> <div class='clear'/> <b:section class='footer' id='footer-left' preferred='yes'/> <b:section class='footer' id='footer-center' preferred='yes'/> <b:section class='footer' id='footer-right' preferred='yes'/> <div class='clear'/> <b:section class='footer' id='footer-bottom' preferred='yes'/> <div class='clear'/> </div> <div class='clear'/>
A primeira class clear vai ordenar ao navegador que nada fique ao lado direito ou esquerdo da coluna footer-top. A segunda class clear vai ordenar ao navegador que nada fique ao lado direito ou esquerdo das colunas laterais footer-left, footer-center e footer-right. A terceira class clear vai ordenar ao navegador que nada fique ao lado direito ou esquerdo da coluna footer-bottom. E por fim a última class clear vai ordenar ao navegador que nada fique ao lado direito ou esquerdo do container footer-wrapper.
Queremos que essa class que inserimos no código aplique a propriedade clear: both, ou seja que ela limpe ambos os lados da flutuação (both=ambos). Para outras limpezas precisamos aplicar clear: left ou clear: right, mas isso fica para o próximo capítulo :)
Precisamos então avisar ao navegador lá na CSS que essa class é para a propriedade clear: both. Podemos colocar logo no início do código - perto dos estilos do body.
body {
/* estilos do body */
}
.clear {clear: both; }
Não esqueçam do pontinho antes de clear (.clear) para mostrar que é uma class.
Agora só falta aplicar as larguras para cada coluna e outros estilos que você desejar, colocando os códigos lá onde estão os estilos para o footer-wrapper. Exemplo:
#footer-wrapper {
width: 900px;
margin: 0;
}
#footer-top {
width: 900px;
margin: 0;
}
#footer-left {
width: 300px;
float: left;
}
#footer-center {
width: 300px;
float: left;
}
#footer-right {
width: 300px;
float: right;
}
#footer-bottom {
width: 900px;
margin: 0;
}
As medidas (margin, padding) você precisa ajustar de acordo com o tamanho do container, tamanho das colunas, espaço que deseja entre as colunas, bordas, etc.
Com essas noções você pode dividir qualquer container de seu template, exemplos:
- Header com 1 coluna no topo, 2 laterais no centro e 1 no bottom;
- Sidebar com 1 larga no topo, 2 estreitas no topo-centro, 1 larga no centro, mais 2 estreitas no bottom-centro e 1 larga no bottom;
- Footer com 4 colunas laterais;
- etc;
imagem cortesia:
Republic Domain - imagens e backgrounds com ótima qualidade de domínio público.
Comentários: 14
ro vi seus comentarios eu que agradeço a atenção
e o tempo disponivel obrigado !!
abraços....
sei que meu blog aos olhos de muita gente é uma coisa insana
e so loucos vão la, mas estamos dando uma lembrança para os leitores se quiser pode participar anonimamente !!!!!
pietro... (☺)
nao da certo, diz que um elemento xml nao ta fechado.
:(
Eu colei o Css do Footer mas o html non.
Pietro: Não preciso participar anonimamente. Adoro filmes de terror, mas não curto a realidade (fecho os olhos quando entro no seu blog... uhauhauhauha).
Mas também não julgo. Boa parte das pessoas gosta, mas por hipocrisia dizem que não (é só ver a muvuca que se forma em volta de um acidente de trânsito).
Vou lá ver do que se trata a promoção, e não vou anônima - mas vou fechar os olhos, tá? :P
Bjs
Iara: Tem uns probleminhas nos códigos de seu template. Quase todos eles são mesmo problema de flutuação (usar o float e o clear). Vamos devagarinho que a gente acerta, tá?
Vou dando os toques lá no seu blog.
Beijinhos!
RO eu vou ficar honrado em ter voce no meu blog !!
e não se preucupe ao entrar voce não
vai se deparar com nada feio
vi aquela obra prima sua e não resisti peguei um so to apanhando um pouco do campo de busca ele não limpa quando se clica nele mas uma ora que eu tiver tempo eu dou uma estudada
ro eu acompanho seu blog desde o alacarte e voce vem se superando cada dia mais parabens
voce é a nossa verção brasileira
da Amanda Fazani
abraços.!!
Pietro: Bem estranho a caixa de busca não estar limpando. Veja se você colocou o código certinho. Esses códigos de caixa de busca são um terror (sem trocadilhos... hehe)! Se faltar uma aspa já não funciona direito.
Puxa, fico super lisonjeada, ainda mais porque a Amanda é minha ídola! :)
Obrigada e um abração!
Ro ja consertei o bug da busca
<li class="search">
<form id="searchThis" action="/search" style="float: right; display: inline;" method="get">
<input id="searchBox" onfocus='if(this.value==this.defaultValue)this.value="";' vinput="" value="Buscar: Digite e tecle ENTER!" name="q" onblur='if(this.value=="")this.value=this.defaultValue;' type="text"> </form>
</li>
o de cima seria o correto
pelo que entendi voce esqueceu colocou aspas duplas no lugar de aspas simples e fexou a classe type="text"/> quando deveria ficar aberta
<li class="search">
<form id="searchThis" action="/search" style="float:right; display: inline;" method="get">
<input id="searchBox" onfocus="if(this.value==this.defaultValue)this.value="";" vinput="" value="Buscar: Digite e tecle ENTER!" name="q" onblur="if(this.value=="")this.value=this.defaultValue;" type="text"/> </form>
</li>
este a abaixo que esta template carolina I instruçoes
ola, quanto ao ultimo comentario(busca no blog) fiz umas modificações e funcionou em meu blog, tentei deixar o codigo aqui, mas não deu,
resultado muito legal, tava querendo isto e não conseguia de outras formas.
Parabens pelo trabalho.
olha no meu blog o codigo, funcionou em todos navegadores que uso.
obs.:os dois codigos ali o texto não desaparecia, "tirei o texto e coloquei "title=".
moisesalba.blogspot.com
esta postagem aqui é para colocar uma coluna embaixo e dividi-la em tres, pois gostaria de poder fazer isto em meu blog, mas fiquei meio perdido com este post.
Meninos, não entendi essa da busca! Eu uso esse código em um monte de templates e funciona!
Bem, pelo menos vocês encontraram uma solução.
Moisés: É uma explicação de como funciona o clear e o float ao adicionar colunas em containers.
Há posts específicos com os códigos para adicionar colunas no Header, no Footer e recentemente na Sidebar.
Falta eu postar para o Main-Wrapper e para os Posts.
Abraços!
O meu blog com um problema. A sidebar não aparece na pagina inicial do blog sendo ele visualizado no internet explorer 7. Mas ela aparece nos post.
http://textosedicas.blogspot.com/
Deiiiiii Conta!!!!!!!!!!!!
Fiz tudo que voce mandou e mais umas coisitas.
Olá João Lopes! Eu estou visualizando bem tanto no Internet Explorer 7 como no Firefox. Será que não foi um problema temporário?
Aeee Iarinha! Seu template está lindo! Sei que você adora mudar, mas se abandonar esse, faz uma cópia e disponibiliza pros seus leitores. Tenho certeza que muitos vão adorar.. :)
Olá!!!
Gostei de suas dicas.
Gostaria de saber como faço para colocar 3 colunas abaixo do título de meu blog o Receitas Saborosas (http://recantodarose.blogspot.com/), pois quero colocar neste espaço o feed, o e-mail e o tradutor.
Abraços,
Rose
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Observação: somente um membro deste blog pode postar um comentário.
Feed dos ComentáriosBlog This!