Quando encontrei esse efeito "For shares" achei ele bem diferenciados de muitos efeitos por ai, ele dá um super destaque quando passa o mouse em cima da imagem, sinceramente recomendo a usar nos autores ou coisa do tipo, mas acho que nos afiliados também ficaria legal, se você gosta de coisa chamativa.
Sim, eu sei que sempre encho o post de blá blá blá, mas é que só postar o tuto não é tão legal assim concordam? Não? Okay, chega de falar então e vamos ao que interessa, ficou curioso para saber como é o efeito? Clique em "Leia Mais" e confira o efeito.
Diferente não? Vamos ao tuto.
Procure por "]]></b:skin>" após ter encontrado cole o código abaixo acima
.qitem{
width:110px;
height:110px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUJ7QwBuBmMJN0pGo9FxAy5A44cKX5XEUNa7IYboR94-3wqchdNuFDiyy9ZvUnyX5E3POP7-NwfjOWwQoSVC0ZompEyGsuLZQ4V-pDLjfoPeUky0Gktyxy0p6cdel89H0xv2I0IDQovZjO/s1600/af.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;
}
Após ter feito isso, visualize, caso tudo esteja normal, salve. Agora, vá em layout > adicionar gadget > HTML/Javascript e cole o código abaixo:
<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>
Eu sei que o código é grande, mas é uma boa ter um efeito diferenciado... Bom, espero que tenham gostado do post e antes que eu me esqueça. Créditos: aqui.
Você só pode ser vidente *0*
ResponderExcluirFaz anos, desde que eu tive experiencia com HTML que eu estou procurando esse tutorial *u*
Obrigado (:
abraço ;]
Obaaa! Fico feliz que o tutorial tenha sido útil *---*
ExcluirObrigado pela visita :3
abraços.
Muito bom o tuto, gostei !
ResponderExcluircr4zy-world.blogspot.com.br
Fico feliz que tenha gostado!!
ExcluirObrigado pela visita ♥
Oie, é a minha primeira vez aqui. Adorei conhecer. Vc pode conhecer o meu blog?
ResponderExcluirwww.rosachiclets.com.br
Se gostar, siga-me que eu retribuirei.
Bjs - Suzana Rosa
Oii, fico feliz que tenha gostado :)) Posso sim, pode deixar :)
ExcluirObrigado pela visita ♥
Amei os tutoriais de efeitos nas fotos!!!
ResponderExcluirBjus
http://blogluminoso.blogspot.com.br/
Que bom que gostou Liny
ExcluirObrigado pela visita ♥