Udah agak lama kayanya saya gak nulis Tutorial CSS3 di blog yang ini hhe... Dan kali ini saya mau kembali nulis tutorial yang masih ada hubungannya dengan CSS3. Tepatnya, kali ini saya mau mengajak anda untuk membuat "Sliding Image Gallery". Dan berhubung saya gak suka yang ribet-ribet, jadi Sliding Image Gallerynya akan saya bikin Pure CSS3(tanpa Javascript atau jQuery), dengan tujuan agar reload Blog anda tetap stabil.
Ocre bentuknya seperti yang anda lihat pada gambar diatas, atau untuk yang mau liat penampakannya silahkan KLIK DISINI untuk DEMO, klo gak salah saya taruh di bagian paling bawah.
Karena yang saya pake disini hanya Efek CSS3, jadi bentuknya emank gak terlalu wah kaya Sliding Image Gallery dengan jQuery hhe... tapi untuk anda yang hanya butuh Fungsi Sliding Image Gallery saya rasa ini juga gak jelek-jelek banget koQ dari pada anda pake Sliding yang disediakan Hosting Image anda dengan embel-embel iklan mereka :D
Dan Sliding Image Gallery ini saya buat kosong atau Blank jika tidak ada Image di Thumbs yang diklik. Dan sebaliknya saya buat menjadi kosong kembali jika Image yang sudah diklik dan ditampilkan anda klik kembali.
Lantas bagaimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
#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. Jika Sudah beralihlah, dan letakkan HTML berikut ditempat yang anda inginkan. klo anda mau naro di Widget silahkan gunakan Menu Add gadget yang ada di Elemen Laman, atau jika anda mau langsung naronya di Edit HTML kaya Demo yang saya buat, silahkan Cari kode <body>, dan letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:<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. Save template dan lihat hasilnya.
Keterangan: Silahkan Ganti Url Image yang saya beri warna merah dengan Url Image yang ingin anda letakkan di Slider. Oiya, warna dan lebar serta tinggi slider juga dapat anda atur di Kode CSS.
Membuat Sliding Image Gallery Pure CSS3
Posted by sunariyo on Wednesday, February 1, 2012
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Follow us on:
0 komentar:
Post a Comment