-->

Sliding Boxes

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css">
.boxgrid{  
    width: 325px;  
    height: 260px;  
    margin:10px;  
    float:left;  
    background:#161613;  
    border: solid 2px #8399AF;  
    overflow: hidden;  
    position: relative;  
}  
.boxgrid img{  
    position: absolute;  
    top: 0;  
    left: 0;  
    border: 0;  
}
.boxcaption{  
    float: left;  
    position: absolute;  
    background: #000;  
    height: 100px;  
    width: 100%;  
    opacity: .8;  
    /* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    }
.captionfull .boxcaption {  
    top: 260;  
    left: 0;  
}  
.caption .boxcaption {  
    top: 220;  
    left: 0;  
}
</style><br />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script><br />
<script type="text/javascript">
$(document).ready(function(){  
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  
    //Vertical Sliding  
    $('.boxgrid.slidedown').hover(function(){  
        $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});  
    }, function() {  
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});  
    });  
    //Horizontal Sliding  
    $('.boxgrid.slideright').hover(function(){  
        $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});  
    }, function() {  
        $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});  
    });  
    //Diagnal Sliding  
    $('.boxgrid.thecombo').hover(function(){  
        $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});  
    }, function() {  
        $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});  
    });  
    //Partial Sliding (Only show some of background)  
    $('.boxgrid.peek').hover(function(){  
        $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
    }, function() {  
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});  
    });  
    //Full Caption Sliding (Hidden to Visible)  
    $('.boxgrid.captionfull').hover(function(){  
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});  
    }, function() {  
        $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});  
    });  
    //Caption Sliding (Partially Hidden to Visible)  
    $('.boxgrid.caption').hover(function(){  
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});  
    }, function() {  
        $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});  
    });  
});
</script>

Markah Html

<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
</div>

<div class="boxgrid caption">
<img src="kamil.jpg"/>
<div class="cover boxcaption">
<h3>Kamil Smala</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/the-art-of-kamil-smala/" target="_BLANK">More Work</a></p>
</div>
</div>

<div class="boxgrid slideright">
<img class="cover" src="martin.jpg"/>
<h3>Martin Stranka</h3>
<p>Photographer<br/><a href="http://www.nonsensesociety.com/2009/03/photography-by-martin-stranka/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid thecombo">
<img class="cover" src="florian.jpg"/>
<h3>Florian Nicolle</h3>
<p>Graphic Designer<br/><a href="http://www.nonsensesociety.com/2009/03/portrait-week-florian-nicolle/" target="_BLANK">More Work</a></p>
</div>

<div class="boxgrid slidedown">
<img class="cover" src="nonsense.jpg"/>
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br/><a href="http://www.nonsensesociety.com" target="_BLANK">Website</a></p>
</div>
<div class="boxgrid peek">
<a href="http://feeds2.feedburner.com/buildinternet" target="_BLANK"><img src="birss.jpg"/></a>
<a href="http://www.buildinternet.com" target="_BLANK"><img class="cover" src="buildinternet.jpg"/></a>
</div>

Jarek Kubicki

Artist
More Work

Kamil Smala

Artist
More Work

Martin Stranka

Photographer
More Work

Florian Nicolle

Graphic Designer
More Work

The Nonsense Society

Art, Music, Word
Website

Selamat Mencoba

credit: s3.amazonaws

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

© Tips&Tricks, AllRightsReserved.

Designed by ScreenWritersArena