Membuat Sliding Image Gallery Pure CSS3 (Tanpa Javascript Atau jQuery)
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.
Selamat Mencoba...
ane mau komplain dulu ni sob..."ente punya blog keren kek gini kok ga bilang2 ane..."
BalasHapusuntung ane baca2 komentar di blog kang pakies eh ga taunya ente nongol di sana pake blog yg ini ;p
boleh dong ane belajar banyak disini,soalnya ane mau utak atik template tapi ane masih nubi banget kalo masalah gituan di tambah koneksi ane yg super lemot:(
Sukses terus ya Sob.... ;)
nah rupanya maNGKAL Disini lagi dj nand, kangen juga rasanya , ke dj site masih postingan yang batal ke Surabaya, oh iya saya mau coba dulu sliding imagenya terimakasih
BalasHapuswow, naksir tenan pure css slidere ini pak, ane juga rada alergi jque.. tak gendonge bawa pulang, maturnuwun..
BalasHapusbtw itu gambar mobilnya habis dapet hadiah dari undian telkom kan? ciakakaka
met liburan.. :D
Wah Saya Lagi Pingin Buat Slider Yang Memanggil Gambar Dari FLickr / Video Dari Youtube
BalasHapussiding image ini bagus kalau blognya berteme berita dan sejenisnya, tp kalau blognya bersifat personal saja, kayaknya kurang cocok deh
BalasHapus@ Djangan Pakies : Ndak bisa muncul ya kang? apa udah bza muncul tapi kaya waktu itu salah ID? klo ndak muncul perkiraanku ketiban salah satu fungsi lain kang...
BalasHapus@ Zan Insurgent : huahaa.... maaf deh sob, ane lgi gak bsa maen pake DJ Site soalnya kmrn2 hhe... Ini cuma Blog Isenk koQ hhe...Sukses juga Sob...
@ smp 3 lembang : Iya nie Pak, nanti sore InsyaAllah saya buat postingan baru hhe...
@ alkatro : huaha.... podo aku nggeh rada alergi biarpun tampilannya keren :L jiaahahha...... iya hadiah tipuan wkwkw..
@ Nurul Imam : Perasaan ini juga pemanggilan gambarnya ke hosting kaya Flickr,imagehack atau lainnya deh Sob? cuma klo Flickr punya widget sendiri klo mau instant.... klo Youtube mah embednya aja udah baru lagi sourcenya.... ngapain kita bikin pemanggilan lain hhe..
@ Rizkyzone : Itu kenapa aku juga gak pernah pasang slider kaya gini hhe... :D
laris manis nich ea.
BalasHapushhe
mantap gan 2 jempol gan
BalasHapuswah thanks gan langsung praktek..
BalasHapustapi kalo otomatis tanpa harus pasang2 gambar sama link manual bisa gak?