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).

13 dezembro 2008

Como dividir os posts em duas colunas

Esta eu aprendi no excelente Blogger Buster: como dividir seus posts em duas colunas. Era algo que eu vinha tentando a muito tempo, sem sucesso. No final das contas, a Amanda resolveu a questão de maneira muito simples do que eu vinha tentando (ainda bem!).

Antes de começar, eu deixo a sugestão de que você crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece.

Para que você entenda do que este tutorial trata, clique aqui (meu blog de testes) e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página incial do seu blog. O uso do hack Leia Mais é opcional e eu usei ele no meu blog de testes para converter um template do wordpress. Ele não é necessário, ok?

Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px; mude para 940px como mostro acima, em destaque.

#main-wrapper {
width: 620px;
float: $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 */
}

Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:

#sidebar-wrapper {
width: 300px;
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 */
}

Remova de header-wrapper e footer-wrapper a linha que determina a largura:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:

#blog-pager {
width: 600px;
clear: both;
text-align: center;
}


Agora vamos posicionar melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

Corte a parte em vermelho e cole imediatamente após:

<a expr:name='data:post.id'/>

Feitas estas modificações, copiei o código abaixo:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

e cole imediatamente após </b:skin>

Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!

Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
.post-body img {width: 280px;}
</style>
</b:if>

Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left; Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:

.post {width: 310px; height:220px;........

Isto por que estou usando o hack Leia Mais, que é opcional.

Artigos Relacionados

46 comentários:

Anônimo disse...

Uma classe da CSS pode ser repetida várias vezes dentro de um código xhtml então de certo modo eu já sabia que era possível, só não sabia como . Agora os temas Magazines ficarão muito mais fáceis de fazer.

Otimo post

Anônimo disse...

Essa é a melhor dica que já achei.
Sempre quis fazer isso no meu blog para economizar espaço e ficar com uma cara do tipo revista...
Ficou bom...

Mas,
só os 4 primeiros ficam bem. Depois ele salta uma postagem.... vc poderia olhar lá o q aconteceu e ver como resolver esse probleminha na hora de usar essa implementação?

Aguardo...

Ariane disse...

lemos, a única coisa que notei no código é que a linha: .post {width: 265px; margin-right: 7px; float: left;overflow: hidden;} está repetida 3 vezes. eu já uso este modelo em outros blogs com vários posts resumidos e não tive nenhum tipo de problemas. se eu descobrir algo te aviso, ok? abraços

Anônimo disse...

Ariane,
mesmo apagando as linhas q coloquei a mais, não funciona bem.

Eu reformulei agora o blog com um novo template e segui as orientações suas ao pé da letra, sem me metar a mexer em nada, só nas dimenções, e mesmo assim persiste o erro... dá uma olhada lá no blog.
Não fica feio, mas seria melhor se ficasse alinhados...

Agradeço a atenção!

Fabio Dj F.A.T. disse...

Bom dia.
É a primeira vez que estou escrevendo por aqui, mas sempre visito.
Sou meio que 'recém-nascido' no mundo blog.
Estou navegando há semanas atrás de uma resposta na qual não encontro. =(

Gostaria de saber se poderia me ajudar com uma coisa que parece ser bem simples.
É a retirada da linha dos links, como no teu blog, ali ao lado esquerdo onde estão as categorias, pois gostaria de fazer o mesmo com o meu blog.

Procurei em todo canto da internet e não encotrei.
Se puder me ajudar, ficarei mais do que grato.

Obrigado pelo espaço e pela atenção.
Fábio

Warriors Music
www.warriorwas.blogspot.com

Anônimo disse...

@lemos você definiu seu seu main-wrapper como 574px e declarou uma margem de 4px a esquerda isso faz seu espaço ficar com 574-4=570px, ok? Menos 2px da borda então são 568px. Ai você no código para fazer os post ficar um ao lado do outro declarou 270px de largura + margin a direita de 5px. Se 270+270= 540+10 das margens= 550px, então voce fica com 18px de espaço. Só que no código CSS .main e .widget você deu um padding de 15px na direita e esquerda o que são 30px vezes 2 = 60px então tudo ficaria em 610px, simplesmente não cabe no main-wrapper.

Ariane disse...

dj, dá uma olhada neste link: http://templatesparanovoblogger.blogspot.com/2008/09/como-fazer-um-template-para-o-blogger_22.html

Anônimo disse...

.

csspadroes,

acho q entendi o erro, mas não entendi o q eu preciso mudar...
pode me dizer exatamente o q devo mudar?
É q eu não entendo nada de programação, mas seu seguir etapas... rs!

Se puder me ajudar dessa vez!?!

Marcos Lemos

Anônimo disse...

@lemos ou vocë diminui o codigo do .post para menos de 270px ou aumenta seu main-wrapper para mais 40px.

Ariane desculpe a invasão no seu Blog

Ariane disse...

csspadrões, invasão?! topa criar um fórum comigo? para tirar as dúvidas do pessoal?

Anônimo disse...

Seria um grande prazer!

Ariane disse...

css, espero q esteja falando a sério, pq eu estou...nos últimos dias estou atras de um sistema bom para criar o fórum...mas, como tenho muito blogs, sozinha me sinto sobrecarregada. se for a sério mesmo, entra em contato comigo pelo e-mail q uso no grupo do BlogspotBrasil.

Anônimo disse...

Ok amanhã pela manhã entrarei em contato. Agora vou levar as crias para ver o Bom velhinho.

Souza Downloads, testes disse...

Oi, é o seguinte: Criei meu blog de teste com a mínima e fiz tudo o que disse, mas na hora de encotrar esse código: a expr:name='data:post.id'/
que diz ai no post, eu ñ encotrei no meu blog! Por favor se puder me ajudar agradeço muito, obrigado desde já pelo post, muito interessante, e já segui muitas de suas dicas no meu blog. Meu email para resposta (jeovaci75@hotmail.com)

Ronny Ventura disse...

Consegui fazer não.
Achei dificil pacas.
Mas valew a dica.
Abraços!

Ariane disse...

Souza, não tenho como te ajudar, além de te recomendar usar o Ctrl+F para encontrar o código. se vc pegou o mínima sem modificações, o código está lá sim.

Ronaldo, difícil não é, até eu consegui.

Suzy Santana disse...

Ariane, gostaria de saber se você irá disponibilizar um template já com esses códigos modificados? Gostaria de saber se não pode ser um modelo igual ao que você mostrou aqui como de testes, que ficou muito lindo?
Grata.

Marcelo Medeiros Soares disse...

Prezada Ariane,

Essa dica é excelente, mas não consegui fazê-la funcionar no blog mínima que criei. Quando colo o código após b:skin

Dá o seguinte erro quando peço para visualizar:

Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Element type "b:if" must be followed by either attribute specifications, ">" or "/>".

Ariane disse...

Marcelo, havia um erro com as aspas do código mas já consertei. abraços.

Thiago Martins disse...

eu ja tentei fazer isso mas não consegui será que vc pode fazer isso no meu template?

eu mandaria ele por e-mail e você mandaria ele de volta ja com as alterações, pode ser?


eu realkmente tentei fazer isso mas não estou conseguindo sempre acontece algum erro, se tu poder me ajduar seria otimo

Obrigado desde já

thiaguinhobessa@gmail.com

Editor disse...

CARA.VALEU PELA DICA, ESTAVA A PROCURA DESTE CODIGO A MILHOES DE ANOS, RSRS.. . OBRIGADO PARCEIRO

Will disse...

Olá Ariane,

Infelizmente o problema que o lemos encrontrou tb estou encontrando; tentei seguir as instruções do "css padroes",mas não funcionou.

Há alguma outra possibilidade?

Adorei o post, aguardo!

Thiago Martins disse...

Eu ocnsegui fazer só que acontece o mesmo erro que tem no Ferramentas Blogger do Lemos, fica uns espaços no meio do template a primeira coluna coloca um post sim e um espaço vazio

da uma olhada la
futeboldobrasil.co.cc

se alguem souber o que faz me avisa pois a dica do csspadroes não da certo não sei se o meu problema e diferente do Lemos mas bora ver se aparece uma alma caridosa ehhehe

poxa e eu tinha gostado pra caramba dessa dica ia emplementar no Blo do Futebol do Norte tbm

Thiago Martins disse...

a tem uma coisa nesse erro que o Lemos, eu e o Wilcomjc encontramos se desfaz algumas vezes dependendo dos primeiros posts não sei bem pq mas quem poder examinar o erro seria excelente pq essa dica é é otima pra quem coloca posts longos

Ariane disse...

Thiago, eu consegui driblar este problema estabelecendo um tamanho fixo para cada post. Veja como aqui: http://templatesparanovoblogger.blogspot.com/2008/12/template-colunas.html

Thiago Martins disse...

consegui Ariane, muito orbigado, mas como agente coloca uma borda ao redor desses posts que nem no exemplo que tu deu, pode me da essa dica???

gostei muito do seu blog ja usei umas 3 dicas daqui em uma semana

Valeu mesmo

Thiago Martins disse...

Ariane tu que sabe mecher com esses codigos infinitamente melhor que eu sabe me dizer se da pra tornar o textos dos posts na pagina inicial um link pra pagina desse post?

não tem como eu estabelecer um numero de caracteres no hack "Leia Mais" pra não precisar usar aquele codigo no final da postagem?

é pq meus dois blogs tem varias pessoas ajudando e so eu tenho uma noção de como fazer pra te ter ideia tem gente que se enrrola ate pra colocar os marcadores rsrsrsrsrs

se tu poder me dar mais essa luz seria otimo

Suzy Santana disse...

Feliz 2009 Ariane.
Que esse seja um ano de muito sucesso na sua vida, amor, paz e sonhos realizados, e que você continue sendo essa multiplicadora de conhecimentos "blogosféricos".
Abraços.

GAZETA DO SERTÃO disse...

QUANDU E QUE VC VAI DISPONIBILIZA ISTO PARA OUTROS TEMPLANTES COMO AQUELES QUE JA TEM 3 COLUNAS FICARIA GRATO SE FIZEC ISSO COM RAPIDEZ

GAZETA DE POMBAL disse...

CONSEGUI FAZER ISSO NO MEU BLOG E EM SEGUIDA ADICIONEI OUTRA COLUNA DA FORMA COMO ENSINA AQUI

Unknown disse...

Olá. É possível fazer isso em um template wordpress convertido para o blogger? obrigado! Ótimo Blog!

Equipe Guia The Blogs disse...

Oi li muito seu blog hoje! ésa dica foi a unica que não consegui usar em meu blog.
mas mesmo assim o as outras me trouxeram grande ajuda.

A minha pergunta é se esse metodo tambem pode ser aplicado em templates mais complexos, ou só deve ou só pode ser usado em Templates que o Blogger oferece?

Grato pela atenção: WIL Finrod

Ariane disse...

equipe guia, acredito que se todas as divs tiverem a mesma largura, como mostra o texto, não haverá problema

Marcus Garcia disse...

poxa man não conseguir fazer não da uma olhada ai no meu blog é alertageralonline.blogspot.com queria muito dividir as materias em duas colunas

Unknown disse...

olá ariane, bem minha imagem não diminui no meu blogger, consegui separar e tudo, mas não to conseguindo isso, que é diminuir, você me dizer onde estou errando para eu arrumar ?

tudodehardware.blogpsot.com
ralfoliver2005@hotmail.com

Unknown disse...

Ariane, muito bom seu post, consegui fazê-lo, pórem não o deixei lado a lado, deixei um embaixo do outro, o que acontece é que no meu blog, a linha

.post-body img {width: 280px;}

como vc citou no exemplo, não está funcionando o efeito de width, os demais sim, float.. e tals,
menos o width.. não sei o pq,

por favor me ajude..
se possível me manda um e-mail dizendo aonde está errado para eu consertar. Obrigado.

ralfoliver2005@hotmail.com

valeu ariane, e mais uma vez.. parabens pelo blog.. muito boa suas dicas.
confesso ki mudei td nu meu blog através das suas dicas.

valeu.

Anônimo disse...

Olá

Também não consgui fazer com que as imagens da página principal ficassem com o mesmo tamanho.

bjs

Myrianna
myri.coeli@gmail.com

Luis disse...

Ariane, não da pra fazer com o ICE que voce criou falta algumas linhas, como

data:adStart/

espero que me ajuda, porque estou procurando essa resposta a muito tempo

LuGui ;D disse...

Ariane olha eu aqui de novo

http://parada-geografica.blogspot.com/

acessa e vê como ficou, ta tudo bagunçado, não estou conseguindo, e olha que eu fiz com o seu template ICE, me ajuda ai né???

Ligia disse...

Olá Ariane, tudo bem? Passei para uma visitinha e olha o que achei, muitas novidades... Bjs.

Brito disse...

Estou seguindo o teu tutorial, e não encontrei as classes indicadas no templete minima.

É possivel o google ter alterado o template, por isso não consigo achar nada em coincidência?

Luan Vieira disse...

Ola Ariane!! Otimo tutorialm gostaria de saber se da para fazer um outro tutorial parecido com esse mais tipo do mini lua so uma pequena imagem e o titulo do lado ?

Mauricio disse...

Se eu clico em alguma imagem dos posts, abre a imagem. Teria como ao invés de abrir a imagem abrir a postagem?

Dicas Infinitas disse...

Poderia postar um novo post referindo-se ao novo Blogger 2010? Muito obrigado.

Anônimo disse...

como faz isso em um template do proprio blogger

Matheus Ribeiro disse...

Olá Ariane, ótimo tutorial, me ajudou muito, mas tenho a mesma duvida do "Luan Vieira (Adiministrador)", vc tem algum código para que seja possivel por o titulo do post ao lado da imagem do post?

Postar um comentário

Os comentários são moderados.