Miniaturas de Postagens na Página Inicial

Olá!!! Hoje eu lhes trouxe um tutorial para otimizar sua página inicial, melhorando aspectos como o carregamento mais rápido, layout, e fornecendo ao leitor a visualização de um maior número de postagens. Vamos fazer com que as postagens da página inicial apareçam em forma de miniaturas, com título, imagem e algumas informações. Os mini posts aparecerão na busca de posts por categorias também.
Funciona como no estilo de layout que uso atualmente, mas a forma que vou mostrar será diferente, editada por mim com base no que aprendi originalmente no Ciudad Blogger, a quem vai os créditos. Esse que estou usando agora faz parte do template que baixei gratuitamente e foi editado por quem o criou (link ao final do blog), é bem mais profissional, mas ainda não cheguei ao nível de criar efeitos assim ^-^
Consegui obter esse resultado nos modelos Simple e Travel do Blogger:

Antes de começar...
Faça um backup do seu template sempre! Caso não goste das alterações, é só voltar ao seu modelo antigo.
Você deve saber quanto de largura tem sua área de posts e sua sidebar; essa informação você encontra em seu template procurando por Posts e Sidebar; nos modelos feitos com Designer de Modelo do Blogger, a *área de posts geralmente se encontra em:
.main-inner .column-center-inner {
  padding: 0 $(main.padding);
width: 600px;
}

(acrescente o valor no local destacado em vermelho) e a sidebar tem largura especificada em Personalizar - Ajustar larguras.
*Em alguns templates a área de posts está em .post-outer ou .post body.
Claro que a personalização vai mudar de acordo com o modelo que usar e você pode incrementar o código com mais coisas. Considere esse como uma base ok?
Agora sim, acrescente o código abaixo ANTES de </head> em seu HTML:

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#main-wrapper {
width: 910px; /* soma da largura da sidebar+area de posts */
}
.post {
border-left: 2px solid #fee; /* borda esquerda*/
border-right: 2px solid #fee; /* borda direita*/
border-bottom: 2px solid #fee; /* borda do rodape*/
border-top: 2px solid #fee; /* borda do topo*/
box-shadow: 5px 5px 5px 5px #a1a1a1;
float: left;
height: 200px; /* altura do quadradinho */
width: 200px; /* largura do quadradinho*/
margin: 6px; /* Distancia entre os quadradinhos */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #f9b; /* cor dos titulos dos posts */
background: #fff; /* background dos titulos dos posts */
margin: 5px 5px 0 5px;
text-align: center;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px solid #fee; /* borda abaixo do titulo*/
width:100%;
font-size: 15px;
}
h3.post-title, .post-header {
margin: 0;
background:#fff;
}
.post img {
height: 100px; /* altura da imagem */
width: 200px; /* largura da imagem */
float: left !important;
border: none;
box-shadow: 2px 2px 2px #a1a1a1;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
h2.date-header { /* ocultar data apenas na pagina inicial*/
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if> 

Visualize e salve se deu tudo certo. No código você pode personalizar cores, bordas, tamanhos de cada quadradinho e da imagem; se quiser que apareça apenas as imagens com títulos altere a altura (height) da imagem.
Note também que como são miniaturas, você pode adicionar até mais de 10 postagens na Home e nas buscas. No caso, o que fiz tem espaço para adicionar de 2 em 2 posts seguindo o valor da largura da sidebar (310px) e dos posts (600px), então para não ficar espaço em branco (como ficou no exemplo) adicione números pares tipo 12 posts. (Defina isso em Layout-Postagens no blog-Configurar postagens-Número de postagens na página principal).
Hmmm...acho que é só por enquanto. Divirtam-se modificando o código e beijinhos ;3






Postar um comentário

22 Comentários

  1. Eu estava precisando o tuto, muito obrigada gostei muito xD
    kissus ;3

    ResponderExcluir
  2. Era o que eu queria *-*

    ResponderExcluir
  3. anw~ eu ainda achava o cabecalho mais kawaii com a chibi Hatsune Miku >\\\\< mas assim também tá muito lindo :3 amo os lays do seu blog u.u são sempre de encher os olhos!!!

    ResponderExcluir
  4. Oi linda me ajuda por favor? Me blog é novo e queria ajuda de alguém mais experiente, tipo vc sabe? Então, você pode divulgar meu blog?
    Obrigada desde já (ps: entenderei se vc não puder)
    with-you-s2.blogspot.com

    ResponderExcluir
  5. Que bom que gostaram ^^
    Iza:Também adorei ele ^^ Demorei trocar ;--;
    Mandi:Tá divulgado ^^ Se quiser deixe seu link também ali na aba make wish ok?Sucesso para vc ;3

    ResponderExcluir
  6. Eu consegui,mas só que as imagens não ficam direitinhas -.- tem alguma solução pra isso?

    ResponderExcluir
    Respostas
    1. Tudo referente às imagens se edita em post img, como o posicionamento, largura e altura; só que o valor da área definida por vc (aquela da área de postagem + sidebar) e dos quadradinhos interfere também; aí vc deve verificar esses valores direitinho para ficar alinhado certinho. Tente ir modificando o código para se adequar ok?
      Beijus ;3

      Excluir
  7. Adorei! Obrigada :D :D :D

    ResponderExcluir
  8. Anônimo05 março

    Muito obrigado me ajudou muito tentei outros códigos nenhum funcionou ! só o seu ! Vlw

    ResponderExcluir
  9. Olá, tudo bem?"
    Sei que o seu tutorial é antigo, mas super funcionou no meu blog, te agradeço muito. Apenas gostaria de retirar o texto da postagem na página inicial e gostaria que ele aparecesse somente na página interna dos posts
    E gostaria também de inserir um botão do tipo leia mais
    Como faço? Me ajuda? Vou ficar esperando sua resposta!

    ResponderExcluir
    Respostas
    1. Oie :3 Tdb?
      Bem, vc pode aumentar o tamanho da altura da imagem para que ela ocupe toda a área da miniatura de postagem (lá em height: 100px;).
      Ou pode adicionar o leia mais automático: desse post aqui.
      Espero ter ajudado ^^

      Excluir
  10. Olá! Como alinho uma do lado da outra? O meu ficou como uma escadinha, uma mais abaixo da outra mas do lado. Queria todas na mesma linha como no seu exemplo.

    ResponderExcluir
  11. Coloquei na minha página, ficou muito bom. Obrigado.

    ResponderExcluir
  12. Olá amei seu blog. E gostaria de uma ajuda. Esse tutorial foi o mais fácil e perfetio que achei. Mas queria saber se dá pra mostrar apenas a foto de capa, tem como fazer isso?

    Obrigada!

    www.danielabritto.com

    ResponderExcluir
    Respostas
    1. Oi (=^v^=) Muito obrigada!!! Fiquei feliz com sua visita <3
      Encontre o trecho:
      .post img {
      height: 100px; /* altura da imagem */

      Aí aumente o valor da altura da imagem, por exemplo:
      .post img {
      height: 100%; /* altura da imagem */

      A imagem oculta o texto; espero que ajude :3

      Excluir
    2. Obrigado por responder. Não consegui, ficou igual. Outra opção seria deixar a fonte do texto menor, mas quando mudo o font size fica igual. Será que tenho que acrescentar algum código?

      Excluir
    3. Oi :3 Então, desse jeito que te falei da altura da imagem continua dando certo em modelos padrões do blogger; essa é a maneira que conheço ^^
      Vou dar uma olhada em alguns códigos de templates de sites como soratemplates.com, themexpose.com e way2themes.com, que tenho por aqui e se encontrar uma maneira melhor, posto aqui no blog ok?

      Excluir
  13. FUNCIONOU MUITO OBRIGADAAAA
    só ainda queria saber como eu coloco leia mais nessa miniatura de post, pode me ajudar com isso?

    ResponderExcluir
  14. Oi Roberta .. eu gostei muito do tutorial, mas no meu blogger as tres ultimas postagens em miniatura aparecem em escadinha,as seguintes aparecem alinhadas, e as linhas de contorno do corpo original do post aparecem acumuladas ao topo por tras das miniaturas ....como eu faço pra arrumar ?

    ResponderExcluir
    Respostas
    1. Talvez você deva dar uma olhada nas larguras do seu blog, da área de postagem...
      Testei esse código aqui em um modelo padrão do blogger e continuou normal.
      Tem esse desse post também e deu certo.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up