Tutorial - Efeito Four Shares

 

Yoo!

Finalmente eu poderei recompensá-los pela falta de postagens, não é? Espero que não tenha sido tão ruim ficar sem tantas postagens diárias, mas é realmente necessário. Aos que me pediram para postar aqui em virtude disso, eu agradeço, mas não irei mais aceitar postadoras no blog.

Outra coisa que gostaria de perguntar, será direcionado aos haters. Gostaria de saber das pessoas (ou da pessoa) que ficam mandando besteiras pela ask uma coisa... Por que não gostam de mim? E que tal resolver isso de forma civilizada? Se quiser, resolva diretamente comigo e assim poderemos concertar a situação.

Enfim, lembram do template anterior onde havia algumas indicações no banner? Nas imagens existia um efeito, que se chama Four Shares. Os créditos vão para o Designs 4 You e para a Lary, que me ensinou tudo.

Para quem não lembra, veja aqui.  São os quadradinhos verdes ali.

1. Primeiro vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole

.qitem{

width:110px; 

height:110px; 

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJT9Skq61lYkRbet7h3742ZADRYx_-3UIwOuOCKWuy68u1WusWdRt2uLKfKQH0OSyi_gK_w7ifnKoQtUjyL5b_NyfC03UYAgxQFzQXel7Lk6hXcbBeElQt8_EW0zLoEueRbffMMlKqF5P/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;

}

Clica aqui para entender mais esse código enorme do enjoy the html, basta ignorar haters, ok? 

2. Depois de personalizar, crie um  gadget de HTML/JavaScript e nele, cole:

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