31.12.12

Feliz Ano Novo + Efeito Cortina

Tumblr_mftbratocv1rhonyyo1_500_large
Oi meus amores vim desejar a vocês , uma feliz Ano Novo com pazharmonia , felicidade , amor
diversão e tudo de bom ! Vocês merecem :) vamos ao feito :
Click aqui para ver o efeito

Eu acho ele o máximo !
 
Vá em seu Html  e procure por → ]]></b:skin>

Agora acima da tag ]]></b:skin> cole :


.qitem {     width:93px;     height:93px;      border:4px solid #COR DA BORDA     margin:2px 0px 2px 4px;     background: url('http://static.tumblr.com/b1gnlwd/D6gm3btai/bg.gif') no-repeat;        overflow:hidden;     position:relative;     float:left;     cursor:hand; cursor:pointer;}
.qitem img {     border:0;     position:absolute;     z-index:200;}
.qitem .caption {     position:absolute;     z-index:0;      color:#ccc;     display:block;     width: 93px;     text-align: center;     margin-top: 23px;}
.qitem .caption h4 {     font-size:12px;     padding:10px 5px 0 8px;     margin:0;     color:#ff4d4d;}
.qitem .caption p {     font-size:10px;     padding:3px 5px 0 8px;     margin:0;}
.bar1, .bar2, .bar3, .bar4 {     position:absolute;     background-repeat: no-repeat;     z-index:200;}
.clear {     clear:both;}

Faça as alterações , visualize e se estiver tudo certo Salve !

Agora em um gadget → Html-JavaScript cole :

 <script src="http://static.tumblr.com/b1gnlwd/OX1m3bgeu/jquery-1.3.1.min.js"></script><script src="http://static.tumblr.com/b1gnlwd/Gndm3bgdn/jquery.easing.1.3.js"></script><script>
$(document).ready(function() {
    //Custom settings var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 800; var speed_out = 300;
 //Top and bottom var top = $('.qitem').height() * (-1); var bottom = $('.qitem').height();
 $('.qitem').each(function () {
  //retrieve all the details of the image before removing it  url = $(this).find('a').attr('href');  img = $(this).find('img').attr('src');  alt = $(this).find('img').attr('img');  width = $(this).width() / 4;  height = $(this).height();
  //remove the image and append 4 div into it  $('img', this).remove();  $(this).append('<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div>');
  //set the image as background image to all the bars  $(this).children('div').css('background-image','url('+ img + ')');
  //Divide the image into 4 bars and rebuild the image  $(this).find('div.bar1').css({bottom:0, left:0, width:width, height:height, backgroundPosition:'0 0' });  $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });  $(this).find('div.bar3').css({top:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });  $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });
 }).hover(function () {
  //Move those bar, 1st and 3rd move upward, 2nd and 4th move downward  $(this).find('div.bar1').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});  $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});  $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});  $(this).find('div.bar4').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});   },
 function () {
  //Back to default position  $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});  $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});  $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});  $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
 }).click (function () {
  //make the whole box clickable  window.location = $(this).find('a').attr('href'); });});
</script> <div class="qitem">     <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a>     <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>
 
Mude Apenas oque esta em negrito ! Caso queira mais imagens (no caso efeito em mais imagens)
Copie de  <div class="qitem"> até </div> e cole de pois deste </div>

Assim

</script> <div class="qitem">     <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a>     <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>

<div class="qitem">     <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a>     <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>

Entenderam ?

Espero que tenham gostado 








2 comentários:

  1. Que efeito maneiro kk Fiquei passando o mouse em cima! Feliz 2013 pra vc tbm *0*

    ~> Seguindo aqui,poderia retribuir?Até♥
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  2. Kk' Obrigada por seguir ! Sigo o seu sim :) Obrigada

    ResponderExcluir

Que bom que vai comentar !!
Mais para fazer isso leia as regrinhas:
- Aceito criticas ,sugestões e opiniões.
- Seguindo segue de volta,se comentar sobre o post.
- Não retribuirei a visita se não comentar sobre a postagem.
- Deixe o link do blog para eu retribuir a visita.
Eu e o DW agradecemos ! Fique com Deus .