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

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.

• Aumentar ou diminuir o tamanho de imagem com paint
• Como mudar imagem no Blogspot
• Div e imagem lado a lado e do texto
• Colocar div para gadget em cima do post no blogger
• Estilo das postagens do BlogSpot com Css
• Estilos do blog, tamanho, cores e fonte de texto e títulos no blogger
• Permitir que mais autores postem no blog com blogger
• Mudar estilo da data da postagem do Blogspot
• Aparência de comentário do autor no Blogger
• Criar postagem com marcadores no blogger