Últimos posts no topo do blog

Olá pessoal, hoje eu vou ensinar como colocar os últimos posts no topo do blog, para colocar vá em Modelo >> Avançados >> CSS e cole esse código:

#box_recentes{width: 100%; }
.recentes{overflow: hidden; position: relative; border: 3px solid #fff; padding: 0px; float:left; margin-left: 5px; margin-bottom: 40px; opacity: 0.6; width: 174px; height: 174px; border-radius: 90px}
.recentes .mask, .recentes .content {background-color: rgba(238, 175, 179, 0.7); width: 174px; height: 174px; position: absolute; overflow: hidden; opacity: 0; transition: all 0.5s linear; top: 0; left: 0}
.recentes:hover .mask {opacity: 1;}
.recentes img {display: block; position: relative -webkit-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);  -moz-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);}
.recentes:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);  opacity: 8;}
.recentes p {opacity: 0; font-family: Arial, sans-serif;font-style: italic; line-height: 1.3em; font-size: 14px; position: reltive; color: #fff; padding: 30px 16px 0px; text-align: center;}
.recentes:hover p {opacity: 1;}
.recentes a.info {font-size: 11px; display: inline-block; text-decoration: none; padding: 5px 10px; background: #fff; color: #ff8f8f; text-transform: uppercase; box-shadow: 0 0 1px #fff; margin-left: 48px;}
.recentes a.info:hover {box-shadow: 0 0 5px #fff;}

Salve, agora vá em Layout >> adicionar gadget >> HTML/JavaScript e cole esse código:

<div id='box_recentes'><div class="recentes"><img src="http://i.imgur.com/PKrIsGY.jpg" /> <div class="mask"> <p>Apple pie sesame snaps cake chocolate bar</p> <a href="link da postagem" class="info">Leia mais</a> </div></div></div> 

Essa div: <div id="box_rencetes"> não pode ser alterada de forma alguma, você vai editar o que está dentro dela, ou seja, isso aqui:

<div class="recentes"><img src="http://i.imgur.com/PKrIsGY.jpg" /><div class="mask"><p>Apple pie sesame snaps cake chocolate bar</p><a href="link da postagem" class="info">Leia mais</a></div></div>

O que você pode editar: img src: link imagem;<p></p> : título da sua postagem;href: link da sua postagem.
Obs: todos os itens devem estar entre aspas (""). 

Para você poder colocar duas ou mais postagens é só replicar o código, assim:

<div id='box_recentes'>
<div class="recentes"><img src="http://i.imgur.com/PKrIsGY.jpg" /><div class="mask"><p>Apple pie sesame snaps cake chocolate bar</p><a href="link da postagem" class="info">Leia mais</a></div></div>
<div class="recentes"><img src="http://i.imgur.com/PKrIsGY.jpg" /><div class="mask"><p>Apple pie sesame snaps cake chocolate bar</p><a href="link da postagem" class="info">Leia mais</a></div></div>
</div>

 Replique quantas vezes quiser, na minha opinião fica mais bonito 4 ou 5 posts recentes no topo do blog, mas isso vai de você, depois de salvar arraste para cima de Postagens no blog...

Resultado

Espero que tenham gostado, tchaaauu até o próximo tuto!