Efeito Four Shares

Bom dia pessoal! Infelizmente essa tarde não poderei postar, terei que ir a uma festa apesar de prefirir ficar em casa lendo mangás e postando, mas fazer o que né? Então já trago uma post pela manha, vou ensinar como fazer o efeito " Four Shares", os créditos vão para o blog KW e Designs 4 You. Caso não saiba como é o efeito veja aqui, eu peguei o demo original do KW.

 Lindo o menu né? Eu achei ele super lindo e charmoso, ate um pouco chamativo. Você adiciona esse menu em apenas dois passos, nada dificil de fazer, também vou deixar a explicação para aqueles que tiverem mais dificuldade. ~Let's Go!~

1. O primeiro passo é ir ate seu  HTML e procurar por ]]></b:skin>. Acima dessa tag, cole:

Códigos

.qitem{
width:110px;
height:110px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMIkDEp-FzJE5j7TmOWElGd6vd_sHycG0eU13AmrpZthjcHEm23HCJdgsrMXsXeaBLKs81kZhEXydHxQJZUnJkVPlx4dBl7apcO7W19I3b9OlfBM9zuUyKu5S-I3DCQgUXtcyCj-O2FZa/s1600/722.png') no-repeat;
overflow:hidden;
cursor:pointer;
position:relative;
margin:10px;
display: inline-block;
}

.qitem img{
border:0;
position:absolute;
z-index:200;
}
.qitem .caption{
position:absolute;
z-index:0;
display: block;
}
.qitem .caption h4{
font-size:8px;
padding:25px 15px 15px 15px;
vertical-align: middle; margin: 0;
}
.qitem .caption p{
padding:3px 5px 0 8px;margin:0;
}
.topLeft,.topRight, .bottomLeft, .bottomRight{
position:absolute;
background-repeat:no-repeat;
float:left;
}
.topLeft{
background-position:top left;
}
.topRight{
background-position:top right;
}
.bottomLeft{
background-position:bottom left;
}
.bottomRight{
background-position:bottom right;
}
.clear{
clear:both;
}

2. Aqui tem uma imagem explicando as partes principais de edição. [Imagem Aqui]

Depois de tudo personalizado, vá ate seu layout é crie um  gadget de HTML/JavaScript e dentro, cole:

Códigos

<script src="http://static.tumblr.com/rozpbz7/6CSm6yab0/fourshares.js"></script>
<script src="http://static.tumblr.com/rozpbz7/3NEm6yacj/fourshares2.js"></script>
<script>
$(document).ready(function() {
 //Custom settings
 var style_in = 'easeOutBounce';
 var style_out = 'jswing';
 var speed_in = 1000;
 var speed_out = 300;
 //Calculation for corners
 var neg = Math.round($('.qitem').width() / 2) * (-1);
 var pos = neg * (-1);
 var out = pos * 2;
 $('.qitem').each(function () {
 url = $(this).find('a').attr('href');
 img = $(this).find('img').attr('src');
 alt = $(this).find('img').attr('img');
 $('img', this).remove();
 $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
 $(this).children('div').css('background-image','url('+ img + ')');
 $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
 $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
 $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
 $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});
 }).hover(function () {
 $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
 $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
 $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
 $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); 
 },
 function () {
 $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
 $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
 $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
 $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
 }).click (function () {
 window.location = $(this).find('a').attr('href');
 });
});
</script>


<div class="qitem">

<a href="SEU LINK"><img src="LINK DA IMAGEM PRINCIPAL" alt="Test 1" width="91" height="72"/></a><span class="caption"></span>

</div>

Espero que tenham gostado, se tiver duvida pode pergunta, ok?  Não esqueça de créditar o KW e o D4Y.