Accordion Style Slider with Valid CSS3

Accordion slider (hover based) ini dibuat dengan hanya menggunakan murni kode CSS3 yang sederhana saja, tapi hasilnya memuaskan Sob!!. Tanpa menggunakan Javascript apapun, Markup kode HTML yang mudah dan accordion slider ini scalable (dapat disesuaikan) untuk jumlah gambar/image yang dipasang serta dapat dengan mudah diterapkan di website/blog. Sebagai bagian dari blog Anda yang sangat fungsional, dan bukan hanya fashion saja! Ada banyak jenis Accordion Slider ( akordion slider) namunsayangnya kebanyakan menggunakan Javascirpt, plugin jQyery Accordion Slider, Anda bisa bayangkan bagaimana jika pengunjung/visitor telah mematikan/membuat disable Javascript pada browser mereka?
Tentu accordion slider tidak berkerja dengan baik dan ini mengecewakan Anda dan visitor.

Ya banyak keuntungan, jika Anda membuat Accordion Slider dengan pure CSS, selain ringan karena tidak perlu memuat sekumpulan kode-kode javascript yang rumit juga dapat digunakan sebagai galeri image/gambar, galeri video, tour navigasi (untuk produk), untuk slider konten, atau untuk menampilkan portofolio version.

Dan yang lebih penting Accordion Slider Horizontal Keren dengan CSS3 ini bekerja dengan baik di hampir semua browser utama:  Chrome4 +, Safari 4 +, Opera 10.5 +, Firefox 4 + + dan IE7,8,9.

Transisi accordion slider horizontal yang kita buat ini bersifat hover effect based atau hanya dengan mengarahkan pointer/mouse ke atas gambar/objek maka slide akan bergerak/bekerja.

• Demo

Cara Membuat Accordion Slider Horizontal Keren dengan CSS3
Langkah Pertama : markup kode HTML di bawah ini
Markup akan memiliki daftar dengan gambar dan judul pada setiap image

<div class="accordian">
<ul>
<li>
<div class="image_title"><a href="#">Accordion Style Slider dengan CSS 1</a></div>
<a href="#"><img src="Images" /> </a>
</li>
<li>
<div class="image_title"><a href="#">Accordion Style Slider dengan CSS 2</a></div>
<a href="#"><img src="Images" /> </a>
</li>
<li>
<div class="image_title"><a href="#">Accordion Style Slider dengan CSS 3</a></div>
<a href="#"><img src="Images" /> </a>
</li>
<li>
<div class="image_title"><a href="#">Accordion Style Slider dengan CSS 4</a></div>
<a href="#"><img src="Images" /> </a>
</li>
<li><div class="image_title"><a href="#">Accordion Style Slider dengan CSS 5</a></div>
<a href="#"><img src="Images" /> </a>
</li>
</ul>
</div>

Keterangan :
Pada tulisan Images silahkan ganti dengan URL gambar yang ingin ditampilkan

Langkah Kedua : CSS dan Style

Langkah ini antara lain membuat background,  menerapkan lebar untuk accordion, lebar gambar hover dll.

* {
 margin: 0; 
 padding: 0;
}
body {
 background: #ccc; 
 font-family: arial, verdana, tahoma;
}
.accordian {
 width: 805px; //  Lebar keseluruhan accordion slider
 height: 320px; //  Tinggi keseluruhan accordion slider
 overflow: hidden;
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
 width: 2000px;
}
.accordian li {
 position: relative;
 display: block;
 width: 160px; // Lebar gambar saat normal
 float: left;
 
 border-left: 1px solid #888;
 
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
}
.accordian ul:hover li {
width: 40px; // Lebar gambar saat tertutup
}
.accordian ul li:hover {
width: 640px; // Lebar gambar saat terbuka
}
.accordian li img {
 display: block;
}
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0; 
 width: 640px; 
}
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}

Pemasangan Accordion Slider Horizontal di Blog

Jika Anda ingin memasang Accordion Slider Horizontal sebagai widget di blog Anda, langkahnya :

• Masuk Blogger > Tata Letak > klik Tambah Gadget
• Klik Add HTML Javascipt > Letakkan kode keseluruhan Accordion Slider Horizontal didalamnya
• Kemudian Simpan

• Demo

Semoga tutorial cara membuat Accordion Slider Horizontal Keren dengan CSS3 ini bisa memperkaya dan memperindah blog Anda secara fungsional maupun dari segi desain blog

Selamat Menikmati....