Efeito Sliding.

 Por: Lalalalala    10:11  tutorial   Sem Comentarios

Oi docinhos, faltando exatamente 1 dia pra véspera de natal, começam os preparativos para a ceia, arrumando a casa, e talz, mas o mais importante é que vc lembre que tem gente que vai passar o natal sem nada pra comer, sem ninguém , sem nada, então faça uma boa ação, se junto com seus amigos ou familiares e façam um mutirão para arrecadar alimentos para essas pessoas que estão passando fome, garanto a vocês que no final do dia vocês vão se sentir muito melhor.

Então vamos para o tutorial certo ? Bom esse tutorial eu vi no Cherry Bomb, de cara eu já amei o efeito e tenho certeza que vocês também irão amar, é bem fácil até mesmo pra quem não entende muito de html.

  Preview (www)

Procure por  ]]></b:skin>

e acima dele cole 

/*** EFEITO 4 SLIDING
Original por cantinho-html.tumblr.com | Editado por cherry-liah.blogspot.com ***/
.qitem {
    width:140px; /*Largura da imagem*/
    height:140px; /*Altura da imagem*/
    border:4px solid #222; /*Borda da imagem*/ 
    margin:5px 5px 5px 0;
    background: #000; /*Cor de fundo quando passa o mouse*/  
    overflow:hidden;
    position:relative;
    float:left;
    cursor:hand; cursor:pointer;
    font-family: arial; /*Fonte do texto*/
}

    .qitem img {
        border:0;
     
        /* allow javascript moves the img position*/
        position:absolute;
        z-index:200;
    }

    .qitem .caption {
        position:absolute;
        z-index:0;  
        color:#ccc; /*Cor da legenda*/
        display:block;
    }

        .qitem .caption h4 { /*Estilos do Título da legenda*/
            font-size:18px;
            padding: 10px;
            margin: 0px;
            color: #D40C0C;
            text-align: center
        }

        .qitem .caption p {
            font-size:11px; /*Tamanho da fonte do texto da legenda*/
            padding: 10px;
            margin:0;
            text-align: center;
        }

.bar1, .bar2, .bar3, .bar4 {
    position:absolute;
    background-repeat: no-repeat; 
    z-index:200;
}

.clear {
    clear:both; 
}

 E salve, feito isso vá em layout e crie um gadget Html/JavaScript 

e cole :

<script src="http://static.tumblr.com/y66747w/ZENmeendx/jquery-1.3.1.min.js"></script>

<script src="http://static.tumblr.com/y66747w/9kAmeene8/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({top: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({bottom: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:top}, {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:bottom}, {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"><img src="LINK DA FDOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 1</p></center></span>
</div>

<div class="qitem">
    <a href="LINK"><img src="LINK DA FOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 2</p></center></span>
</div>

<div class="qitem">
    <a href="LINK"><img src="LINK DA FOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 3</p></center></span>
</div>

Depois é só colocar o link da foto e a legenda que você quer que apareça ok ?  

Se o tuto ajudou é só comentar.