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.
Por:Ariane
Marcadores:
Colunas,
Tutorial
Estou lendo: Como dividir os posts em duas colunasTweet this!
Artigos Relacionados
Assinar:
Postar comentários (Atom)
45 comentários:
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
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...
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
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!
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
@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.
dj, dá uma olhada neste link: http://templatesparanovoblogger.blogspot.com/2008/09/como-fazer-um-template-para-o-blogger_22.html
.
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
@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
csspadrões, invasão?! topa criar um fórum comigo? para tirar as dúvidas do pessoal?
Seria um grande prazer!
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.
Ok amanhã pela manhã entrarei em contato. Agora vou levar as crias para ver o Bom velhinho.
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)
Consegui fazer não.
Achei dificil pacas.
Mas valew a dica.
Abraços!
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.
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.
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 "/>".
Marcelo, havia um erro com as aspas do código mas já consertei. abraços.
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
CARA.VALEU PELA DICA, ESTAVA A PROCURA DESTE CODIGO A MILHOES DE ANOS, RSRS.. . OBRIGADO PARCEIRO
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!
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
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
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
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
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
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.
QUANDU E QUE VC VAI DISPONIBILIZA ISTO PARA OUTROS TEMPLANTES COMO AQUELES QUE JA TEM 3 COLUNAS FICARIA GRATO SE FIZEC ISSO COM RAPIDEZ
CONSEGUI FAZER ISSO NO MEU BLOG E EM SEGUIDA ADICIONEI OUTRA COLUNA DA FORMA COMO ENSINA AQUI
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
equipe guia, acredito que se todas as divs tiverem a mesma largura, como mostra o texto, não haverá problema
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
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
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.
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
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
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é???
Olá Ariane, tudo bem? Passei para uma visitinha e olha o que achei, muitas novidades... Bjs.
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?
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 ?
Se eu clico em alguma imagem dos posts, abre a imagem. Teria como ao invés de abrir a imagem abrir a postagem?
Poderia postar um novo post referindo-se ao novo Blogger 2010? Muito obrigado.
como faz isso em um template do proprio blogger
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.
[フレーム]