Para fazer isso no seu blog entre na pagina editar HTML, antes de começar salve uma cópia do seu template (baixar modelo completo) assim poderá facilmente voltar ao modelo atual se tiver algum problema. Usamos o template Mínima do Blogger para fazer essa explicação, procure por:
#sidebar-wrapper {
width: 220px;......}
ou somente #sidebar {....
Logo abaixo desse trecho coloque:
#sidebar-wrapper-doble {
width: 220px;
float: $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 */
}
#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}
Depois disso procure por
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
O trecho em negrito são os gadgets que tem no seu blog, portanto no seu blog deverá ter varias linhas parecidas com essa, elas não interferem em nada essa modificação é apenas o conteúdo da sua sidebar. O importante é colocar o código abaixo entre </b:section> e </div>
<div id='sidebar-wrapper-doble'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>
Salve e depois entre na pagina layout e arraste os gadgets para essas novas sub colunas (coluna dividida em dois), você deve visualizar ela mais ou menos assim:
Para ficar melhor podemos aumentar a largura total do blog, volte a pagina editar html e procure por:
#header-wrapper {
width:660px;.........
#outer-wrapper {
width: 660px;............
#footer {
width:660px;............
E troque esses três valores 660px por 980px, depois note que nos trechos acima onde modificamos a sidebar tem o valor 220px, ele aparece duas vezes então modifique os dois para 460 e visualize seu blog, acho que agora ficou com uma aparência bem melhor com essas novas larguras pra as colunas.
Fonte: El Escaparate de Rosa
Veja também:
Ajustar as larguras do blog e das colunas
Efeitos em links
Lista de banner ou links em ordem aleatória
Usar o Twitter
Melhorar os marcadores
Ferramenta de tradução no blog
Link para esta página
63 comentários:
excelente dica amigo!
o melhor site que conheço, sou honrado em ter seu link em meu blog mesmo ainda não ter conseguido aparecer por ai rsrs
abraços
http://leetelemensagens.blogspot.com
amei este blog...Ensina muito facilmente...
Parabéns e obrigada por ajudar as iniciantes como eu...
bjs
Parabéns pela postagem uma dica que eu queria saber há muito tempo.
Fica na Paz!!!
Não consegui achar por: #sidebar-wrapper {
width: 220px;......}
Onde que ta isso ?
Olá Fabiano,
Primeiramente quero parabenizá-lo pelos excelentes tutoriais.
Mas eu gostaria de saber se você pode me ajudar com o meu template.
Meu template não tem aquela barrinha na base do mesmo, a chamada footer-wraper. Só que eu não sei instalar.
Se você puder me ajudar eu agradeço. Meu template é o TechBuzz, encontrado no BTemplates.
Abraços.
Fabiano, qualquer hora te "pego".
Não sei onde fica isso. É naquela parte EDITAR HTML? Em qual parte?
Socorro e obrigada!
Anônimo
procure por #sidebar, use o ctrl F para procurar é mais fácil
Rascunho Geo ©
você quer uma barra fixa na tela ou no final do blog? entre na pagina layout e arraste os gadgets que deseja para o final da pagina.
vou fazer uma postagem sobre essa barra no final da pagina ou fixa.
Camilla
quando você entra no painel do blogger perto do nome do seu blog tem layout, se clicar nele vai para uma pagina que mostrar os gadgets do blog e no menu tem elementos de pagina..... editar html
Fiz tudo isso, e salvei. Qunado fui olhar o layout estava dividido em dois, só que ficou pequeno demais. Como faço pra deixá-las do tamanho que mostra na foto do seu post ?
Abraço
Leo
como dissemos depois que colocar o código altere os valores 220 para 460 para deixar a coluna mais larga.
amigo tenho uma dúvida, não é sobre este mesmo assunto, mas caso saiba como responder ficarei grato.
tem como colocar anuncios entre as postagens mas não anuncios adsense?
abraços!
http://leetelemensagens.blogspot.com
Renne Oliveira
achei muito boa sua pergunta, vou preparar uma postagem sobre isso, no final de semana já deve estar aqui no Dicas para blogs
Fabiano,
Achei Muito Lindo esse Template do seu Blog será Que você Nos desponibilizaria o Seu Template Para Downloas?
Como faço para colocar uma sidebar do lado esquerdo?
Muito bom o tutorial!!!
Fabiano AGora estou usando Um
Template Original do Blogger e ele Não Tem a Linha
#sidebar-wrapper {
Preciso de AJUDA!
Elaine
veja aqui sobre blog de 3 colunas
http://www.dicasparablogs.com.br/2007/12/blog-com-3-colunas.html
Lucas Muller
procure somente por #sidebar é a mesma coisa
O que é Template?
suprasumo
template, layout, modelo é praticamente a mesma coisa isso na verdade é a aparencia do blog ou seja como as coisas estão organizadas nele, isso inclui também as cores usadas, tamanho de letras e imagens... enfim o visual do blog inteiro.
Obrigado pela dica, ela é bem útil. Vou dar uma estudada. Um abraço. Drauzio Milagres.
Olá.. Meu Nome é Lopez, eu gostaria de saber como eu faço pra deixar o título e a postagem centralizada no meu blog, ja tentei que só mechendo no meu HTML..
http://baixandogostozo.blogspot.com
Ajuuda? :(
Seguinte..
Eu até consegui fazer o que você falou..
Mas a questão é que os menus divididos ficam com a mesma imagem do menu maior...
Tem como passar 1 "codigo" para que possa por uma imagem apenas nos divididos...?
Desde já Obrigado!
OacAdm
eu uso exatamente assim como disse a imagem de fundo é uma só para o blog todo, mas se quiser usar separadas é só remover a imagem que está na sidebar e depois colocar individual em cada uma das novas colunas(columna-dcha e columna-izda)
Olá, meu nome é Vitor e eu tenho um blog.
Fiz tudo o que disse nesta postagem mais a minha divisão fica em cima, logo abaixo do cabeçalho.
Ou embaixo, mais nunca do lado.
Eu já tentei várias vezes mais nunca da certo, o que eu devo fazer?
Vitor
talvez tenha alguma falha no seu template que só apareceu agora que tentou modificar algo ou ele seja diferente.
os códigos e a explicação estão corretos então não tem como explicar de outra maneira.
Olá, Fabiano. Primeiro, parabéns pelo blog! Leio e o acompanho há muito tempo e já li e consegui tanta coisa aqui! Mas realmente preciso pôr esse código em prática, mas não tenho sucesso.
parabens pelo blog...
gostaria de saber como faço o inverso, tenho um template desse jeito, so que quero deixar uma coluna na esquerda e uma na direita e a postagem no meio, ja tentei de varios jeito, mas infelizmente nao obtive sucesso.
obrigado, aguardo resposta
Eu Amo Cães...
crie um blog para testes e tente fazer nele, deve ser algo diferente no seu modelo pois muita gente já conseguiu fazer sem problemas
Leone
tente usar essa explicação para reverter o processo
Obrigado por responder Fabiano.
Bom eu ate consegui colocar 1 coluna na esquerda e uma na direita, eu fiz o seguinte:
em:
#contentleft {
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 */
float: center;
width: 300px;
margin: 0px 0px 0px 300px;
padding: 0px 30px 20px 0px;
}
mudei float: left; para float: center;, ai ficou uma coluna de cada lado, porem a coluna de postagem permaneceu a esquerda, e as sidebar ficaram abaixo da coluna de postagem, entao diminui a coluna de postagem para um tamanho bem pequeno para ver se era o espaço, mas nao resolveu, continuou do mesmo jeito.
Então fui em margin e coloquei 300px de margem para a esquerda, mesmo assim não resolveu.
pensei em colocar o link para vc ver o que estava acontecendo, mas vi que nao pode...
vc sabe por que esta acontecendo isso? vc tem algum tutorial que possa me ajudar?
muito obrigado pela atenção
eu coloquei tudo direito mais quando eu vou salvar aprece que columna-izda
aparece duas vezes e ele deve ser unico e exclusivo porque?
clique ctrl f para procurar e veja se não repetiu columna-izda duas vezes na parte do conteudo do blog
Leone
tem que remover essa parte, mas pegar o conteúdo(as partes que mostramos em negrito) dele e colocar diretamente na sidebar
<div id='sidebar-wrapper-doble'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>
Gostei muito da dica amigos, vcs ajudam bastante a muitos iniciantes, que Deus os abençoe...
ola Fabiano, obrigado pela atenção.
infelizmente não consegui, sei que nao posso postar o endereço do blog aqui, mas vou colocar aqui somente para vc ver: www.tatudigravata.blogspot.com, não precisa postar, somente me responder.
da uma olhada, e se souber algum tutorial ou como resolvo isso ficarei muito grato.
obrigado
infelizmente alguns templates são mais faceis trocar do que corrigir.
parece que as colunas dividas não estão dentro da sidebar
Olá eu sou novo com Blog criei o meu faz quase 1 mês, queria saber como que eu faço para colocar o marcador tipo do lado esquerdo no topo da tela e pra colocar os widgets aonde eu quero, porque sempre quando eu adiciono os widgets eles vão todos parar la embaixo da tela, já tentei de tudo e não consegui movimentar, usei o programa NVU e o Windows Live Writer + não consegui fazer nada, se puder me ajudar eu agradeço. O endereço do meu Blog:
http://quartodometal.blogspot.com/
marcador tipo do lado esquerdo no topo da tela e pra colocar os widgets aonde eu quero, porque sempre quando eu adiciono os widgets eles vão todos parar la embaixo da tela, já tentei de tudo e não consegui movimentar, usei o programa NVU e o Windows Live Writer + não consegui fazer nada, se puder me ajudar eu agradeço. O endereço do meu Blog: Desculpa por eu ter colocado o link do blog, depois que eu fui ver que não podia.
geralmente quando um coluna vai parar no final do blog o problema são as larguras
http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html
Oi, desculpe mas vou fazer uma pergunta que não é exatamente sobre esse post:
é que eu queria saber se tem como deixar a sidebar do blogger fixa, porque no meu blog a sidebar tá muito pesada e demorando pra carregar porque eu coloquei muita barra de vídeo nela, aí se ela ficar fixa é melhor,
porque quando forem acessar as postagens mais antigas, não terão que esperar carregar a página toda e a sidebar toda de novo; só vai carregar as postagens e não a barra, que já estará carregada porque está fixa. Tem como fazer isso?
E tem como fixar outros elementos da página além da sidebar, pra não precisar ser carregado toda vez?
Desculpe por eu perguntar aqui nesse post que não é exatamente sobre isso, desde já agradeço e fico aguardando
Obrigada
ClauQueen
entendi o que você quer mas não tem jeito quando clicar para ver uma postagem ou outra pagina do seu blog tem que carregar tudo novamente.
mas na segunda vez é mais rapido que na primeira, se puder retire algumas coisas do blog, altere, deixa alguns videos por uma semana, depois coloque outros...
Só tem um problema: o código apaga a configuração dos títulos dos widgets da barra lateral. Quer dizer que se na primeira parte (sidebar original) os títulos têm a configuração que você escolheu, como imagem/cor de fundo, na segunda parte (dividida) os títulos passam a ser só texto, sem imagem/cor de fundo.
então precisa criar as configurações do titulo nas novas colunas criadas, por exemplo h2 .columna-dcha{....}
Olá, Fabiano! Vim lhe agradecer pela dica! Depois de algum tempo consegui, muito obrigado, de verdade.
" Não foi possível salvar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: endSide "
;/
ah agora consegui :DD
troquei " float: $endSide; "
por " float: none; "
deu certo!
sugiro pra quem tem a sidebar pequena como a minha que é de 350px
aidcione Font-size: 70% ;
...
#sidebar-wrapper-doble {
width: 350px;
float: NONE;
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 */
}
#columna-izda {
width: 50%;
float: left;
FONT-SIZE: 70%;
}
#columna-dcha {
width: 50%;
float: right;
FONT-SIZE: 70%;
}
espero ter ajudado :D
Fabiano, aqui estou outra vez, só que agora é pra te dizer que finalmente consegui colocar as 3 colunas. Fiz o que vc sugeriu, troquei o modelo pelo mínima e deu ceto. Foram horas e horas a fio e algumas noites em claro na frente do pc (como vc já sabe). Mas acho que depois de tanto errar e acertar fiquei craque em HTML e por isso desta vez deu tudo certo! Porque de tanto tentar, peguei os macetes e já sabia o que podia e o que não podia fazer. Posso até te dizer que esta última tentativa foi "bico"... rsrsrs!!
Agradeço carinhosamente pela sua força e paciência, pelos e-mails que vc me respondeu... enfim, vc é gente finíssima!!
Mais uma vez, parabéns!
Mas pode ter certeza, que não parei por aqui... ainda vou te perturbar muitooooooo!!!
Abçs e que Deus te abençoe sempre!
Myrian, mas blog é isso mesmo, nunca fica pronto, já estou quase terminando de arrumar os meus faz anos rsrs
Fabiano, a sidebar fica la em baixo no final do blog...Estranho??E como coloco uma coluna de cada lado do blog?
Xd, provavelmente precisa diminuir a largura das postagens(#main) ou da sidebar
Olá. As dicas são muito boas, mas eu queria saber como faço pra colocar sidebars em um lado e outro, com a barra da postagem no meio?
T. R. Freitas, veja aqui sobre adicionar mais uma coluna no blog
http://www.dicasparablogs.com.br/2009/11/colocar-mais-uma-coluna-no-blog.html
Olá, Fabiano sou luiz henrique e você está de parabéns com suas dicas maravilhosas que vem me ajudando a crescer com meu blog, essa postagem foi de parabéns eu achei complicado um pouco so que consegui entender, agora Fabiano eu nãosei como colacar aquela coisa encima das postagem(sem ser os anúncios) queria muito saber o nome e como colocar é esses que tem o nome "parceria,inicio...
Se você poder me ajudar por favor
luiz henrique, aquilo é um menu horizontal, veja aqui
http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html
Olá! Cara, venho acompanhando o blog e um tempão e sempre estou pegando suas dicas, são fáceis e simples, Parabéns!
Olha só, o meu template ja veio divido em duas partes, como eu crio um sidebar inteiro com uma parte só?
Valeu!
Confesso que penei,muitas horas,mas depois te esfriar a cabeça,consegui.
Por falta de atenção eu deixei a cx "Expandir modelos de widgets" ativa, o que não pediu no tutorial,resultado:não dava certo,mas depois de muita atenção consegui,e ainda do meu jeito.Parabéns pela dica.
Para dividir a barra q fica abaixo das postagens, como faz?
Johny Moreira
veja como Dividir o rodapé do blog - Footer
Olá! Sempre acompanho suas dicas e já usei muitas delas! Obrigada!
Só que fui tentar fazer o que esse post ensina e não deu certo. Antes de começar a mexer eu baixei o modelo completo (e ainda exportei o blog). Só que não sei o que aconteceu, não consigo mais entrar no meu blog! SOCORRO! Dá a seguinte mensagem:
Não foi possível concluir sua solicitação.
Ao relatar esse erro ao Suporte do Blogger ou ao Grupo de Ajuda do Blogger:
Descreva o que você estava fazendo quando recebeu este erro.
Forneça o código de erro e as informações adicionais a seguir.
bX-p1pcwz
O que eu faço? Me ajude, por favor!
Quando eu clico no arquivo que foi salvo (modelo completo), fica carregando algo, mas nunca completa!
E quando eu clico no outro arquivo (o que foi exportado), aparece um monte de coisas! Não sei o que fazer!
Meu blog é (ou era!):
marianamaedeprimeiraviagem.blogspot.com
Agradeço muito qualquer informação!
Obrigada,
Mariana
Mariana
tenha calma, vai conseguir entrar no seu blog novamente.
se tentar enviar o modelo que baixou na pagina editar html e não conseguir, tente escolher outro modelo na guia ao lado de editar html, talvez o modelo que baixou veio com erro por isso não conclui.
infelizmente terá que começar a editar o blog de um modelo padrão, vai dar trabalho mas não perderá seu blog.
tente usar Designer de modelo - Layout e Configurações Avançadas
é mais facil criar um template nele.
Fabiano, agradeço a resposta. Mas o problema é que nem consigo entrar mais no blog para em "Editar html"!
Se puder entrar nele, verá o que está acontecendo:
marianamaedeprimeiraviagem.blogspot.com
Obrigada!
Consegui acessar o blog e voltou ao normal!
Obrigada!
MEU AMIGO ELE DUBLICOU O MEU SIDEBAR COMO VC ESPLICA MAIS ELE COLOCOU EM BAIXO DO OUTRO SIDEBAR QUE EXISTIA TEM COMO EU COLOCAR DO LADO?( cOMO MOSTRA NA SUA IMAGEM)
EBS
talvez tenha faltado algo na hora de copiar os códigos, veja também se a largura é suficiente, as vezes pode ter um gadget com conteudo muito largo e força a sidebar para o final da pagina.
Eu gostaria de sabe como juntar um sidebar pois achei um templante que tem uma sidebar dividida em 2 e gostaria muito de juntar porque infelizmente estao dando um erro...
veja na pagina designer se quiser trocar de modelo no seu blog lá é muito simples colocar duas colunas.
ou tente refazer a divisão da sidebar, mas tenha cuidado com os detalhes do código as vezes não fechar aspas ou um sinal < > faltando dá erro.
Postar um comentário