Postagens lado a lado na Página Inicial do BlogSpot

Mostrarei códigos para deixar as postagens uma do lado da outra em blogs do blogger, porém, quem quiser fazer isso com seu blog precisará estar preparado para 'quebrar a cabeça'. Isso só acontecerá nas páginas que agregam vários posts.

Logicamente, para alguns isso será algo fácil, mas, não para a maioria, eu nem mesmo aconselho a fazerem isso com seu blog, porque as pessoas estão acostumadas a ler um post abaixo do outro, e, se você optar por usar esse código e deixar postagens lado a lado é bom estar preparado para o trabalho que está por vir, tanto ao adicionar/alterar o código, quanto depois de adicionar o código. O fato das postagens ficarem lado a lado obriga elas a terem o mesmo tamanho, sendo assim, você terá que ter o cuidado de evitar muito texto nelas, se tiver mais conteúdo do que é previsto vai aparecer uma barra de rolagem e isso poderá deixar o visual menos bonito.

Sendo assim, você precisará evitar que muito conteúdo vá para o post na Página Inicial, categoria e arquivadas, uma forma de fazer isso é usar a opção de resumo de posts e leia mais do blogger, para evitar erros, antes de colocar códigos no seu modelo, você pode transferir seu modelo para um blog de testes e testar os códigos antes, até porque você terá que modificar o código abaixo para adequá-lo a sua vontade e largura de seu blog.

Isso funciona? Esse código foi testado em 3 modelos de layout(antigos 2006) e todos os novos modelos(design 2010) do blogger, dos novos modelos, um não funcionou, foi o modelo de nome Awesome Inc ou Espetacular Ltda. Isso reforça que em alguns templates da web pode não funcionar, isso porque eles podem usar uma estrutura Html diferente dos padrões da maioria dos modelos do blogger.
Quantos posts lado a lado?
O que vai regular se ficarão 2, 3 ou mais posts lado a lado é a largura de seu modelo e, a largura dos posts que você terá que alterar no código abaixo, ou seja, mais estreito o post permite mais posts lado a lado.
É importante você configurar quantos posts vão na Home, veja como, se você usar o código abaixo para deixar 2 posts lado a lado é preferível configurar para um número divisível por 2, se quiser 3 posts lado a lado terá que configurar para um número divisível por 3, ou seja, neste ultimo caso terá que configurar o número de posts na Home para 3, 6, 9, 12, 15, 18...

Vai ser usado um hack para fazer com que um estilo Css aja apenas na Home, páginas de categorias e arquivadas do blog(arquivadas não funciona), o estilo Css fará com que as postagens fiquem lado a lado e dará medidas para elas, e, também que as imagens fiquem num tamanho menor, usar códigos para reduzir imagens não é muito recomendado, mas é uma das saídas.

Para facilitar o entendimento usei cores no código e, para entender, o código Xml e Html geralmente usa tags que precisam ser 'fechadas', como exemplo vou citar a tag b que é bastante usada para dar negrito em Html, <b>aqui negrito</b>, o que chamo de fechar é usar a mesma tag no final só que com esse caractere /, assim se da o final de alguns elementos ou tags em html, serve para limitar algo. Você pode imaginar Html como um sanduíche, uma fatia em cima, outra fatia embaixo e os condimentos entre elas ou no meio.
Abaixo você terá os códigos que iniciam e finalizam o Hack e os códigos que iniciam e finalizam o Css, no centro você terá toda a estilização Css necessária para fazer o efeito posts lado a lado.

Muita Atenção: alguns terão que substituir no código Css abaixo esse nome de classe .post-outer por esse .post (.post-outer está em dois locais do código Css abaixo). Se não funcionar pode ser por esse motivo, alguns modelos usam uma classe outros usam outra, como eu não sei quais modelos usam qual classe e nem qual seu modelo, é algo que você terá que descobrir testando, não tem outro jeito.

    Adicionar códigos que permitem posts lado a lado

  1. Acesse o blogger
  2. Clique em Design
  3. Clique em Editar HTML
  4. Clique em Baixar modelo completo para fazer uma cópia de seu código, e após isso salve em seu computador

    Se algo der errado você poderá usar esse para fazer um upload e deixar como estava.

  5. Na página do blogger, marque a opção Expandir modelos de widgets
  6. Você deverá localizar esse código:

    <div class='blog-pager'

    E, exatamente antes/acima dele pode adicionar:

    <div class='clear'/>

    Para localizar você pode pressionar juntas as duas teclas de atalho Ctrl F

    Pode haver 2 desse código <div class='blog-pager' em seu modelo, se isso ocorrer, é o primeiro que você deve considerar

  7. Terá que localizar outro código, agora para inserir o Hack com Css localize esse código:

    ]]></b:skin>

    Exatamente após/abaixo desse código ]]></b:skin> pode deixar uma linha em branco e adicionar códigos:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <style type='text/css'>
    .post-outer{width:130px;height:300px;float:left;clear:none;overflow:auto;margin:5px;}
    .post-outer .entry-content img{max-width:67px;max-height:67px;float:left;}
    .entry-content{min-height:140px;}
    /*-- mais código css pra Home... pode add aki abaixo -- */

    </style>
    </b:if>
  8. Depois pode clicar em SALVAR MODELO

Como deixar postagens lado a lado no blogger
Entender detalhes sobre o código Css acima
No código Css acima, você poderá ou precisará alterar algo, isso porque não tem como eu criar um estilo Css específico para seu modelo, uma vez que cada modelo tem uma largura diferente. Observe com atenção o código e veja abaixo sua finalidade e onde é mais fácil mudar.

Abaixo estão trechos do código acima e uma explicação, os códigos abaixo são apenas para entender e não estão prontos para uso, leia com atenção, observe e compare com esse de cima para que possa entender e alterar algo.
Tamanhos e medidas do post
.post-outer{ se refere a postagem do blogger, entre chaves{} estão as propriedades(regrinhas) de estilo Css do post, você pode ou deve alterar algo de acordo com a necessidade de seu modelo, alterar principalmente o que deixei em vermelho, lá você encontra:

width:130px; Que é a largura do post, essa, você terá que aumentar ou diminuir o número da largura a seu gosto e, terá que salvar e ir a seu blog ver se ficou bom.

height:300px; É a altura do post, pode alterar o número.

margin:5px; É a margem externa na volta dos posts, pode alterar.

Dependendo do seu modelo, talvez você precise inserir bordas nos posts para que fique visível onde está cada postagem, neste caso, você pode adicionar algo assim border:1px solid green;
isso deve ser inserido exatamente após o caractere abre-chaves{ o código border cria uma borda, nesse caso de 1px na cor verde, você pode substituir green por outro nome de cor básica em inglês...
Regular alinhamento de outros elementos do post
Você também terá que regular uma altura mínima para a parte interna da postagem, isso vai manter a parte de baixo dos posts alinhada, me refiro aquelas ferramentas do blogger, como reações, marcadores e outros que geralmente ficam abaixo do post, atenção, aparecerá barra de rolagem no post se você aumentar muito o número dessa altura interna, para regular terá que aumentar ou diminuir o número do código de uma linha como essa abaixo, salvar e ver no seu blog se ficou bom:
.entry-content{min-height:110px;}
Tamanhos da imagem do post
A área de postagem na Home será reduzida para caber outras do lado, sendo assim, as imagens também precisarão ser menores, ou não aparecerem, mas para que você possa postar suas imagens grandes normalmente, adicionei um código que vai impedir que as imagens sejam exibidas no tamanho grande, mas só nos posts da Home, categoria e arquivadas, isso porque o código está dentro do hack.

.post-outer .entry-content img{ Se refere a imagem dentro da postagem, entre chaves estão as propriedades(regrinhas) de estilo Css da imagem dentro do post, você pode alterar algo

max-width:67px; É a largura máxima permitida, no caso do código acima, para a imagem do post. Você pode mudar o número e aumentar a largura das imagens.

max-height:67px; É a altura máxima permitida, no caso do código acima, para a imagem do post.

Esse código fará com que a imagem fique com aparência pequena e quadrada, se você usar uma imagem muito retangular ela poderá parecer um pouco distorcida, mas, de qualquer forma, como a imagem ficará muito pequena talvez a pessoa nem note e nem consiga ver a ilustração dela.
Fazer a imagem aumentar ao passar o mouse?
Não é necessário, mas, você pode fazer um efeito onde a pessoa ao passar o mouse sobre a imagem ela parece aumentar, na verdade não é isso, como no código acima existe uma 'regra' Css para impedir que a imagem seja exibida em seu tamanho grande, esse código abaixo vai fazer com que o máximo de tamanho da imagem seja outro quando o visitante passar o mouse sobre a imagem da postagem, também só valerá para a Home, categoria e arquivadas por causa do Hack e o código Css acima.

Muita atenção, no código Css acima eu deixei uma linha em branco para você adicionar códigos Css, se quiser, até deixei a mensagem em vermelho dizendo "-- mais código css pra Home... pode add aki abaixo --", após essa mensagem, na linha em branco do código acima você poderá adicionar outros códigos Css, como esse abaixo:.post-outer .entry-content a:hover img,.post-outer .entry-content img:hover{max-width:125px;max-height:125px;}

Se você inserir esse código, é bom observar que os tamanhos da imagem sejam uns 5 ou 10px menores que Tamanhos e medidas do post que você usar, como mostrei acima, você terá que decidir a largura dos posts, a imagem deve ser menor para que não pareça ficar cortada.


Você pode, para diminuir um pouco o código, apagar exatamente essa linha:


/*-- mais código css pra Home... pode add aki abaixo -- */


Linhas como essa são apenas mensagem que não influenciam o estilo, servem só para você saber ou lembrar de um detalhe no código Css, mas é bom ter cuidado para apagar corretamente, sem deixar caracteres delas, ou mesmo cuidar para não apagar outros caracteres essenciais do Css.

32 comentários:

Postagens lado a lado na Página Inicial do BlogSpot2010-12-07T18:21:00-02:00
  1. Muito bom o post!
    Estava usadando o modelo Espetacular e não estava dando certo... Ai vi no post que não funcionava nele e mudei para o Minima. Mas... Funcionou parcialmente. Mudei o "height:300px" por "height:AUTO"(Para se ajustar a altura do post). E mudei a largura para 300px(Para ficar somente duas colunas de posts). Assim surgiu um problema:O proximo post fica no local mais proximo no topo. Ou seja, se o post da esquerda é maior que o da direita o 3º post ficara na direita ficando um espaço branco na esquerda! Não tem como fazer com que o proximo post comece onde o anterior termina? Para não ter que difinir a altura?(Não quero que fique alinhados...) Não sei se entendeu mais da uma olhada no meu blog de teste... Agradeço se me ajudar...

    Responder
  2. HanC

    Entendi o que aconteceu, a altura das postagens nesse caso é a única maneira que conheço para evitar esse problema, justamente porque eu previ que isso aconteceria eu já coloquei o overflow:auto e instrui para que definissem uma altura para ele, se fosse uma página comum em Html você poderia criar uma div com clear:both depois da segunda ou terceira div que conteria os posts para impedir que isso ocorresse, mas no caso do blogger fica praticamente impossível porque o blogger inseri as postagens automaticamente e no código dele não está definido onde estará a segunda ou terceira, apenas o local onde irão aparecer e o código que elas irão ter.

    Responder
  3. Vlw. Só por ter conseguido fazer isto já ajudou muito... Vou definir uma altura e controlar o tamanho do resumo que colocar em cada postagem... O código para o tamanho da imagem também ajudou muito. Vou continuar personalizando meu template... Obrigado!

    Responder
  4. nao me ajudo em nda
    nao consegui

    Responder
  5. Bom é o seguinte, deu tudo certinho, as postagens lado a lado, coloquei para que aparecesse 4 postagens, sendo assim ficaram de 2 em duas.
    Só que as duas primeiras postagens nao abrem,e as duas ultimas abrem perfeitamente, o que pode ser?

    Responder
  6. Rádio Interativa FM

    Pode ser a largura do código do post que fica logo pós .post-outer{width:

    Pode ter esquecido de algo, fica difícil saber o que realmente ocorreu, se isso for muito importante, o jeito é tentar novamente, com cuidado e do zero para não cometer o mesmo erro.

    Responder
  7. ola tudo bem
    bem eu estou tentando entender o codigo fiz tudinho como vc explicou num blog que criei como test só
    e bem ficou bom mas só tive um probleminha
    no chrome o plano de fundo do posto some e as miniaturar de posts umas do lado da outra ficam sem plano de fundo e no ie8 o plano de fundo vai somente até a penultima linha de posts(a ultima linha de posts ficam sempre sem plano de fundo uma coisa orrivel
    oque devo fazer pra melhorar isso?

    o blog de test é esse:http://testsss22.blogspot.com/

    Responder
  8. Derek Douglas Fehér

    O que vi no seu blog é a imagem de um cachorrinho, mas ela não estava sendo usada como fundo, você precisa aprender um pouco de Css para poder usar uma imagem assim como fundo da postagem.

    São coisas diferentes colocar(ou postar) uma imagem e usar uma imagem como fundo.

    Responder
  9. valeu cara suas dicas são ótimas!

    Responder
  10. Era oq eu queria...mas agora ta com barra de rolagem cada quadrinho tem como tira?

    Responder
  11. exemplo

    Como eu disse no começo do post, você terá que usar a opção de 'resumo de posts e leia mais do blogger' para regular quanto de conteúdo vai para a página inicial.

    Responder
  12. Tem como fazer alguma modificação no código pra que não se basei só na largura, ou seja, se configurar-mos para 4 posts(a largura) e tiverem mais 3, esses 3 apareçam automaticamente em continuação com ou outros, só que embaixo?!

    Responder
  13. Jessi Potter

    É assim, se você ajustar a largura dos posts de forma a caber 4 postagens lado a lado(horizontalmente) e você mudar as configurações do blogger para exibirem 8 postagens na página inicial, aí, ficarão 4 posts lado a lado e abaixo deles mais 4 posts lado a lado, assim fica melhor, mas se seu blog só tem 7 postagens até o momento, aí ficarão 4 posts lado a lado e embaixo mais 3 posts lado a lado.

    Se seu blog você só postou 7 vezes, trate de postar mais. 7 posts não dá nem pra tapar o buraquinho do dente. rsrs.

    Responder
  14. Estou usando 3 postagens, consegui colocar certinho. Mas a primeira fica desalinhada com as demais, fica um pouco acima.. sabe como arrumar?

    Responder
  15. Este comentário foi removido por um administrador do blog.

    Responder
    ...Respostas
    1. Se para ter posts lado a lado você usou o tutorial acima pode desfazer usando a cópia de modelo que no passo 4 pedi para fazer, ou seguir até o passo 7 e em seu modelo encontrar o código que que mostrei e que você pode ter adicionado, se encontrá-lo é porque você adicionou ele para que as postagens fiquem lado a lado, se removê-lo provavelmente o estilo voltará a ter as postagens uma abaixo da outra, desde que não tenha inserido outros códigos que causem um efeito diferente.

  16. Cara você é muito bom gostei muito! mais tem um probleminha eu fiz tudo certinho e tals. mais ai apareceu a barra de rolagem , eu testei em 2 blogs meu e apareceu a barra, no 3 blog deu certo porém não é o blog que eu preciso colocar as postagens umas do lado das outras será que você pode me ajudar?

    OBS:Eu coloquei 'leia mais' no blog e também fis o teste só com 1 imagem em cada postagem sem texto e também não deu certo.

    Bem que você disse que ia dar dor de cabeça :S

    Responder
    ...Respostas
    1. Pode ser um gadget que faz o post ficar muito alto ou algum estilo no modelo.

      Se a barra aparece na vertical, o que você pode fazer é tentar alterar aqueles valores que deixei em vermelho e correspondem a altura, eu tentaria primeiro aumentar o valor que acima que deixei em height:300px; para 500 e se parar o problema vai baixando até ficar próximo ao que você quer e se não resolver pode aumentar esse valor que eu disse e também aumentar aquele que deixei em .entry-content{min-height:140px;}

      Se isso não resolver, você pode substituir overflow:auto; por overflow:hidden;

      e se isso persistir também pode substituir .entry-content{min-height:140px;} por:

      .entry-content{min-height:140px;overflow:hidden;}

      O problema dessas ultimas soluções é que tiram a barra mas se tiver um conteúdo maior que as alturas ele vai ocultar um pedaço.

  17. fiz tudo certinho, meu blog esta para exibir 12 posts na home, meu blog tem 17 post, ele exibe 12 na home, quando vou para a proxima pagina só tem um post, quando vouto tem os outros, o blog esta pulando uma pagina, o que eu faço!


    O blog é de testes! obrigado!

    Responder
    ...Respostas
    1. Nunca vi esse problema, se seu modelo não é do blogger, aí ele pode ter um problema no código que esteja causando isso, ou você está clicando no link de continuar lendo que cada post tem.

  18. Como Que Faço pra Colocar 3 Poster ?

    Responder
    ...Respostas
    1. O que vai regular se vão ficar 2, 3 ou mais posts lado a lado é a largura de seu modelo e/ou a largura dos posts que você terá que alterar no código como mostrei acima, ou seja, quanto mais estreito o post permite mais posts um do lado do lado.

  19. Como faço para não aparecer a barra de rolagem?

    Responder
    ...Respostas
    1. Como explique acima, você pode aumentar a altura onde eu deixei height:300px; ou controlar a quantia de conteúdo que deixará antes apenas no resumo de post.

      Em segunda opção e nada recomendado você pode substituir overflow:auto; por overflow:hidden; mas pode ocultar parte do conteúdo.

  20. nao concegui meus posts estao um abaixo do outro

    Responder
    ...Respostas
    1. Um dos modelos do próprio blogger não dá certo, sendo assim pode ser que alguns modelos de template da web também, talvez você use ele, ou talvez você possa ter 'regulado' uma largura que não cabe dois posts lado a lado...

  21. Olá pessoal
    meu comentario é um tanto tardia mas... um jeito pratico e facil de tirar as barras de rolagem das postagens é tirando o "auto" do "overflow". Pra quem não sabe onde é, fica na mesma linha que o "whight" e o "hight". No meu eu substitui por "10px" e ficou ótimo.

    Responder
    ...Respostas
    1. Como explique acima, o correto é regular a altura onde eu deixei height:300px; e controlar a quantia de conteúdo que deixará que vai para a home-page e isso faz no resumo de post ao criar postagem.

      Mas em segunda opção e nada recomendada você pode substituir overflow:auto; por overflow:hidden; mas pode ocultar parte do conteúdo na página inicial se você colocar muito conteúdo antes do link 'leia mais' e essa parte de conteúdo pode estar o link 'leia mais' que daria acesso a postagem por inteiro, e o problema é bem óbvio, a pessoa não conseguirá acessar a página do post. Por esse motivo reforço que precisa ajustar a altura e memorizar a quantia de conteúdo antes da quebra para resumo de post na home.

      Nem tudo é fácil, essa coisa de postagem lado a lado foge um pouco do padrão dos modelos, existem outras soluções que poderiam ser usadas, como alterar o Html do modelo, mas isso criaria outro problema que é o blogger ter possíveis problemas para alterar o código quando é lançado algum acessório novo.

  22. Juninho14/5/13

    Muuito bom , pena que não funcione em qualquer modelo :/ queria que ficasse igual a esse site :www.boazzudas.blogspot.com as postagens em miniatura e sem barra de rolagem '

    Responder
  23. Cara tu me ajudou muito. Obrigado !

    Responder
  24. TUDO QUE EU QUERIA! Apliquei no site http://schweinsteigernews.blogspot.com.br/ mas ele deixa uns buracos. Está configurado para exibir 6 posts na página inicial. Ele mostra 2, 1, 2 e 1. Como corrigir isso?

    Responder
    ...Respostas
    1. Você está usando height:auto para os posts lado a lado e isso causa esse problema que uma postagem com altura maior impede que a outra se posicione onde deveria.

      No começo eu falei sobre os problemas de a pessoa precisar estar atenta a quantia de conteúdo que postaria, o título do post também entra como conteúdo por estar dentro da área de postagem, como eu disse em outros comentários fica praticamente impossível conseguir com que todas fiquem lado a lado usando height:auto para altura dessas áreas.

      Eu se fosse você começava observando os tamanhos de suas postagens na home e qual a maior, então colocaria uma altura um pouco maior que a mesma e cuidaria para, antes da "quebra de post resumido", nunca postar conteúdo que pudesse ultrapassar esse tamanho, assim, eu também tentaria dar mais destaque para o link de "continuar lendo", tornando ele como um botão:

      .jump-link a{border:1px solid #ccc;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:4px;border-top-left-radius:4px;background:#eee;padding:7px;}

      e também tentaria posicionar ele de forma que ficaria num local meio alinhado com o outro:

      .jump-link a{position:absolute;bottom:1px;right:8px;z-index:23;}

      Só que para esse botão ficar alinhado teria que seguir as instruções do post, inclusive estabelecer uma altura para a div .entry-content que, se não me engano você optou por não usar ou usou height:auto
      O código desse comentário eu não testei, mas acredito que deva funcionar se usado em conjunto com aquele que apresentei no conteúdo da minha postagem, e, claro que alguns ajustes serão necessários, como as posições right e o padding ou cor de fundo e borda para que combine com o seu modelo

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!