Jumat, 27 Mei 2011

Membuat Sliding Image Gallery dengan CSS3

Posted by silett di 20.33 Label: |

Comments



1. Login ke Blogger
2. Klik Design/Rancangan-->>edit html
3. Centang Expand Widget Template
4. Cari kode]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode]]></b:skin>
#imageGallery {
margin:25px;
width:700px;
border: 1px solid #f0f0f0;
}
.imageZoom ul {
height:131px;
padding:10px;
margin:0;
}
.imageZoom ul li {
list-style: none;
margin:0;
padding:0;
float:left;
width:0;
height:131px;
}
.imagePreview {
height:60px;
margin:0;
padding:0;
background: #f0f0f0;
}
.imagePreview ul {
margin:0;
padding:0;
list-style: none;
}
.imagePreview ul li{
float: left;
text-align: center;
margin:13px 15px;
padding:0;
background: #f0f0f0;
}
.imagePreview ul li img {
border: 1px solid #9f9f9f;
padding:2px;
margin:0;
}
.imagePreview ul li a {
outline: 0;
}
.imagePreview ul li a:hover img,
.imagePreview ul li a:active img,
.imagePreview ul li a:focus img {
border-color:#fff;
}
.imageZoom ul li img {
margin:0;
width:0;
height:0;
border:0;
overflow:hidden;
...
}
.imageZoom ul {
...
background: url(Bildpfad) 0 0 no-repeat;
}
.imageZoom ul li img {
...
-moz-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
transition: width 1s ease;
}
.imageZoom ul li:target img {
height:131px;
width:476px;
border:1px solid #f0f0f0;
}

6. letakkan HTML dibawah ini setelah Kode <body> .
<div id='imageGallery'>
<div class='imageZoom'>
<ul>
<li id='slide1'><a href='#'><img alt='Bild 1' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-AstonMartin.jpg'/></a></li>
<li id='slide2'><a href='#'><img alt='Bild 2' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Bentley.jpg'/></a></li>
<li id='slide3'><a href='#'><img alt='Bild 3' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Chevy.jpg'/></a></li>
<li id='slide4'><a href='#'><img alt='Bild 4' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Dodge.jpg'/></a></li>
<li id='slide5'><a href='#'><img alt='Bild 5' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-MercedesBenz.jpg'/></a></li>
<li id='slide6'><a href='#'><img alt='Bild 6' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-MercedesBenz220S.jpg'/></a></li>
</ul>
</div>
<div class='imagePreview'>
<ul>
<li><a href='#slide1'><img alt='Vorschaubild 1' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-AstonMartin-thumb.jpg'/></a></li>
<li><a href='#slide2'><img alt='Vorschaubild 2' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Bentley-thumb.jpg'/></a></li>
<li><a href='#slide3'><img alt='Vorschaubild 3' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Chevy-thumb.jpg'/></a></li>
<li><a href='#slide4'><img alt='Vorschaubild 4' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-Dodge-thumb.jpg'/></a></li>
<li><a href='#slide5'><img alt='Vorschaubild 5' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-MercedesBenz-thumb.jpg'/></a></li>
<li><a href='#slide6'><img alt='Vorschaubild 6' src='http://i785.photobucket.com/albums/yy131/djnand/CSS3-Transition-MercedesBenz220S-thumb.jpg'/></a></li>
</ul>
</div>
</div>

7. simpan

Langganan: Posting Komentar (Atom)