Galeria de Postagens [003]

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 e Reino Kawaii, 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:

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;
}

*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