Galeria/Slide de postagens recentes no topo do blog [005]

Hi bunnuie's! Como estão? Vamos falar da postagem de hoje... bom venho um "slide de postagens recentes no topo do blog". Esse tutorial eu encontrei lá no blog site Enjoy Things, se utilizar credite! Esse modelo eu utilizei em um dos meus layouts, e o resultado foi realmente lindo! Ele possui efeito hover, como é mostrado na imagem mais abaixo, caso queira ver o efeito online/ao vivo basta clicar no link abaixo. Sem mais delongas vamos ao tutorial! É rápido e super fácil de aplicar.

Brevia do efeito

1. Vá até o blog qual deseja aplicar o código, em seguida vá em HTML e procure por ]]></b:skin>, e acima dele cole o seguinte código:

Códigos

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

2. Agora vá em Layout abra um novo gadget java/script e dentro cole:

Códigos

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

3. Clique no botão salvar. Agora posicione o Gadget abaixo do gadget do cabeçalho, ou no topo dos gadgets. 

◤Entendendo o código◥

•  A div: <div id="box_rencetes"> não pode ser alterada em nome, somente seu conteúdo.

• Se desejar colocar mais um slide, basta duplica o código em rosa:

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

É isso queridos! Espero que tenham gostado do efeito e da explicação. Os créditos do tutorial vão para o blog Chá com Anjos.