Membuat Accordion Slider Horizontal Keren dengan CSS3

proBlogiz

---

Tutorial Desain Blog kali ini, akan mencoba membagi tip Cara Membuat Accordion Slider Horizontal Keren dengan 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!!!....Mau lihat demonya, klik aja link dibawah ini ---->>

LIVE DEMO  Accordion Slider Horizontal Keren

Ada banyak jenis Accordion Slider ( akordion slider) namun sayangnya 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, persis seperti yang Anda lihat di Demo Live-nya

Accordion slider in normal

Cara Membuat Accordion Slider Horizontal Keren dengan CSS3

Langkah Pertama : markup kode HTML

Markup akan memiliki daftar dengan gambar dan judul pada setiap image

<div class="accordian">
 <ul>
  <li>
   <div class="image_title">
    <a href="#">Woman at the Desert</a>
   </div>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTB8lflLmnt5mC8A3yDhUcTwsbGwwZ6d9iwqiqpO_etSBL0-czUDCj0htmCHzecV3S1ezBjiDMdeNzDLUB6HNjDpb4j_Nb3CfL6DjA1YbjYCHeW0an7C7w1splLpRT4_v_lcURdAh3WzA/s1600/women+in+desert.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Woman in Red</a>
   </div>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLANftn701EDisQjR-qbf1IdCDf8eun1TSui-Mls_f9YPY9Tte4y8DG9G9Y8sG5ppwSitNW3TAZKFK82iuafyih0D2Q8AJacmSvQtofx-V7EbA-wFM1PsVMzTUCR__cfJXyNoFw4JmTfo/s1600/women+in+red.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Woman at the Garden</a>
   </div>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjbXFkhP633mRxRT9o0i_x-3Jzn0Uoxz1kqGyZbjMWPx-x8mZFT43zN3oGwrNM11UJVqKi8oaZrDJ-68Mt2hAecX49wRMOYKBQeQ_lqJ7Z2AxB327hJYn5YOv0TWVT0hutcKiw4vUsVw/s1600/women+in+garden2.jpg"/>
   </a>
  </li>
                <li>
   <div class="image_title">
    <a href="#">Woman at the Forest</a>
   </div>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib83gQqhJe67obeA7AkHAyUqDvGBn_s8wH0jwZwz54FbzughfrsR-X5phCojwBq6q29qFw4du4OfZ3XQFWuzFCFawY2UZ8eUVtj8XrF-Iosw2_rccDsE-Rpg4ALgXhSpYlpiaIKAW2Dic/s1600/women+in+forest.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Woman at the Beach</a>
   </div>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2TdWRbgmjhxHjW1hdrmg0Kiak-7_kTHkDufPV0YdFysDROwUZB_nUefFfkTjQ9DO0y_gAwXBD2oZ8eUqmw3O8429VNvlg3Shx0wEHhtf4gqll_Na9pRwC90PDi2wC2mMQz8N8ODR-eeI/s1600/women+in+beach.jpg"/>
   </a>
  </li>
 </ul>
</div>

Keterangan :

URL gambar yang berwarna merah ini dapat Anda 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; height: 320px;
 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;
 float: left;
 
 border-left: 1px solid #888;
 
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}
.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}
.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;
}

Keterangan :
body {..} : background, Anda bisa menghapusnya jika tidak ingin ada background
width: 805px; : lebar keseluruhan accordion slider
height: 320px; : tinggi  accordion slider
width: 40px; : lebar gambar saat tertutup
width: 640px; lebar gambar saat terbuka
width: 160px; lebar gambar saat normal

Pemasangan Accordion Slider Horizontal 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

Kode keseluruhan Accordion Slider Horizontal untuk Widget Blogger

<style> * { margin: 0; padding: 0; } .accordian { width: 805px; height: 320px; 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; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordian ul:hover li {width: 40px;} .accordian ul li:hover {width: 640px;} .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; } </style> <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Woman at the Desert</a> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTB8lflLmnt5mC8A3yDhUcTwsbGwwZ6d9iwqiqpO_etSBL0-czUDCj0htmCHzecV3S1ezBjiDMdeNzDLUB6HNjDpb4j_Nb3CfL6DjA1YbjYCHeW0an7C7w1splLpRT4_v_lcURdAh3WzA/s1600/women+in+desert.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Woman in Red</a> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLANftn701EDisQjR-qbf1IdCDf8eun1TSui-Mls_f9YPY9Tte4y8DG9G9Y8sG5ppwSitNW3TAZKFK82iuafyih0D2Q8AJacmSvQtofx-V7EbA-wFM1PsVMzTUCR__cfJXyNoFw4JmTfo/s1600/women+in+red.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Woman at the Garden</a> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjbXFkhP633mRxRT9o0i_x-3Jzn0Uoxz1kqGyZbjMWPx-x8mZFT43zN3oGwrNM11UJVqKi8oaZrDJ-68Mt2hAecX49wRMOYKBQeQ_lqJ7Z2AxB327hJYn5YOv0TWVT0hutcKiw4vUsVw/s1600/women+in+garden2.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Woman at the Forest</a> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib83gQqhJe67obeA7AkHAyUqDvGBn_s8wH0jwZwz54FbzughfrsR-X5phCojwBq6q29qFw4du4OfZ3XQFWuzFCFawY2UZ8eUVtj8XrF-Iosw2_rccDsE-Rpg4ALgXhSpYlpiaIKAW2Dic/s1600/women+in+forest.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Woman at the Beach</a> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2TdWRbgmjhxHjW1hdrmg0Kiak-7_kTHkDufPV0YdFysDROwUZB_nUefFfkTjQ9DO0y_gAwXBD2oZ8eUqmw3O8429VNvlg3Shx0wEHhtf4gqll_Na9pRwC90PDi2wC2mMQz8N8ODR-eeI/s1600/women+in+beach.jpg"/> </a> </li> </ul> </div>

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