In Tutoriais

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

Related Articles

9 comentários:

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

    ResponderExcluir
  2. 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
  3. 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
  4. 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
  5. 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
  6. Muito obrigado me ajudou muito tentei outros códigos nenhum funcionou ! só o seu ! Vlw

    ResponderExcluir

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 - Google+ - Deviantart