Follow Us @soratemplates

domingo, 14 de abril de 2013

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

13 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
  7. 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
  8. 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
  9. Coloquei na minha página, ficou muito bom. Obrigado.

    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