Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

22 setembro 2008

Postagem dividida em colunas

Este truque de dividir a postagem em duas colunas paralelas, eu encontrei no blog Templates e Acessórios, que consulto sempre.
Como achei a dica muito legal, decidí dividir com vocês. É muito fácil realmente de aplicar e você tem a liberdade de usar apenas em determinadas postagens.






Basta inserir em sua postagem o código:

<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div>
<divstyle="clear: both"></div>

Lembrando que você deverá colar este código apenas nas postagens que desejar dividir.

Artigos Relacionados

27 comentários:

Anônimo disse...

Oi Ariane. Essa dica eu tinha pego no Bloggerbuster. A Amanda ensina a fazer uma página de arquivo com colunas, eu até fiz um post sobre isso, e adaptei colocando 4 colunas, conforme você pode ver no rodapé do meu blog.

Anônimo disse...

Será que rola eu colocar uma imagem dividindo os posts??

Luiz Phillip disse...

Muito útil
Valeu a ajuda

Gina disse...

Ariane, estou há quase 24 hs tentando separar os widgets da sidebar (uso o rounders 3 ) e não consigo saber o que faço de errado, porque mesmo seguindo todas as dicas que vc postou sobre este assunto não consigo fazer aparecer espaço de separação com a cor de fundo do blog entre os blocos.
Quando e, se, vc tiver um tempo eu apreciaria muito a sua ajuda

Ariane disse...

Gina, eu te ajudo sim, mas esse template tem um porém. A sidebar tem duas imagens, no topo e na base, que criam a borda arredondada. Para separar as widgets, vc terá que abrir mão das imagens, tirar a cor da sidebar e colocar a cor só nos widgets e depois separá-los com margin, assim:

margin: 5px 5px 15px 5px;

vai ter que mexer em muita coisa, ok? qualquer dúvida deixa um comentário. Abraços!

Bubbles of Mel disse...

Oi, peguei um dos seus templates e fiz um caderno digital pra minha filha. Modifiquei um pouco pra poder colocar a foto dela. Ela se envaideceu e espero que isso a motive a fazer o blog, ou seja, postando as matérias da escola diariamente. Espero também que isso a ajude a passar no vestibulinho para o ensino médio e que tenha valido as seis horas que eu estou em cima disso, rsrs. Se der certo, uma parcela da culpa será sua. Muito obrigada mesmo.Dá uma olhada:
www.cadernomel.blogspot.com
Beijoooooosss
Sol

Ariane disse...

Oi Sol, ficou muito bacana mesmo, heim? Parabéns! Só vou dar uma sugestão, ok? Ví que vc colocou um asterisco no lugar do título, já que editou o título do blog na imagem que usou, correto? Então, vc pode retirar o cabeçalho sem nenhum problema, sem precisar usar este recurso. Vá em Layout e clique em Editar no retângulo que corresponde ao cabeçalho e depois clique em Excluir. Abraços!

Anônimo disse...

Oi Ariane! Tudo bem?
Acompanho sempre as postagens do seu blog! Parabéns!

Eu tenho uma dúvida: encontrei um layout MUITO lindo e minha amiga o adaptou todo bonitinho!
MAS... ele é feito em HTML!

Tem como adaptá-lo para XML? Acho tão mais prático e bem mais bonito!

Aguardo sua resposta e grata desde já!

Beeeeeeeijos!
Anne

Ariane disse...

Anne, tem como, mas não automaticamente. Você terá que modificar um template XML para que fique como o outro. De qualquer maneira, seria melhor que eu desse uma olhada no template. abraços!

XuxuBoy disse...

Olá, primeiro, parabens!
Seu blog me ajuda muito e sempre tem novidades!
...
Normalmente eu não comento, para
não encher muito seu tempo :)
mas sempre passo aqui!
Mas dessa vez eu estou comentando porque
to com uma dúvida!
Eu não to conseguindo mudar o meu menu horizontal, quero colocar um personalizado com borda arredondadas e com plano de fundo, porem eu vi seus links e encontrei sim!
Só que eu pesquisei meu html inteiro e não encontrei se quer uma palavra "navagation" algo assim, como esta no post "PERSONALIZAR MENU HORIZONTAL" :)
Me ajuda quando possivel, obrigado !

xuxuboy.blogspot

Ariane disse...

Xuxu, no caso do seu template a ID que contém o menu se chama 'linkbar-wrapper'. Procure por ela prá editar o menu, ok? abraços

Gina disse...

Muito obrigada. Entro de férias em 3 dias e daí vou tentar fazer as mudanças com bastante calma. Agora, com a sua resposta, é que entendi uma das dificuldades: é que já tem dois blocos na vertical. Gratíssissima.
Vou acrescentar as suas dicas na minha lista de coisas que temo perder, se o LHC produzir um buraco negro.

Bia disse...

Oi Ariane!

Preciso de uma ajudinha! Sou muito lesa nessas coisas de blog! Eu baixei uma template que vc converteu, essa:
http://templatesparanovoblogger.blogspot.com/2008/01/template-wordpress-futuretech.html

Ela é perfeita para mim, só que eu queria tirar a busca! Na imagem eu consegui mexer, mas o código tá dificil de achar como alterar! vc pode me ajudar??

Obrigada

bjs

Bia

Ariane disse...

Bia, apaga todo o código que você pode ver nesta imagem aqui.

Bia disse...

Eu tinha tentado isso 400 vezes e dava erro! kk
Obrigada Ariane, Só porque vc me ensinou deu certo, vai ver eu tava esquecendo de apagar algum codigo, que abria ou fechava!

Coloquei um link pro seu blog lá no Bia Series, meu blog de séries!

beijocas e mais uma vez obrigada

Ariane disse...

Oi Bia, que bom que deu certo! Qualquer coisa é só chamar, abraços!

Bethinha Bêto disse...

Olá,é bem legal seu blog, consegui fazer muitas coisas no meu blog com seu teus tutoriais, mas estou com um probleminha... tento colocar uma caixinha link-me, mas a imagem não aparece, fica com um x encima, já hospedei a imagem em diversos lugares, como no picasa e imageshack, mesmo assim não abre... o que pode ser, please me dê um help!!
Beijos Beth

Ariane disse...

Beth, deixa o código, mesmo com erro, lá no seu blog, prá que eu possa ver qual é o erro, ok? Me avise qdo colocar, abraços!

Webmaster - Webdesign - Webdeveloper disse...

Queria saber se tem que colocar isso tudo dentro de uma div???


Se puder me ajudar eu agradeço...

Anônimo disse...

Olá de novo, Ariane!
O template ao qual me refiro é este aqui:

http://nathriven.blogspot.com/

Teria como modificá-lo?
Quero MUITO que ele seja adaptado >___<"
Grata desde já!

Beeeeeeeeijos!

Ariane disse...

Anne, é como expliquei anteriormente, você tem que transferir as imagens que compoem o template para o novo blogger e mudar as medidas. automaticamente não dá.

Ariane disse...

Bruno, é possível sim dividir uma div desta maneira

PES 6 Brasil disse...

Ariane tem como dividir essas colunas em 3 ?

Blog Granja Ceará disse...

Obrigado pela dica, teste e ficou muito bom. Deixa post com cara de jornal impresso.

Valeu

Myke Fonseca disse...

Ariane só uma dica no seu post, o trecho do codigo css onde tem:
" < divstyle= " clear : both " > < / div > " está com um erro a tag div style está junta o que pode dificultar a postagem para algumas pessoas que não entendem de css então se tiver como alterar o post e separar essas tags seria melhor para evitar futuros problemas pra ti ok!
E em nome de todos que frequentão seu blog, agradeço pelas suas dicas és uma salvação para novos blogueiros!

Matheus disse...

Ariana, eu tenho um blog e eu queria um banner personalizado para mim.

Eu tenho 2 Problemas:

1- a imagem desfoca e fica com qualidade baixa(eu faço no paint)
2- Como eu sei o tamanho correto da dimensão da imagem ?

Anônimo disse...

Essa irei responder por ela toda imagens feita no paint deforma tente fazer em outra plataforma tipo photo fire ou phot shop

Postar um comentário

Os comentários são moderados.