Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz


Accordion Slider Horizontal with CSS


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
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

Artikel Terkait Lainnya:
Click here for comments

11 komentar

min, maafnih numpang tanya min.. waktu saya masukin ke blog. ko dia kaya kepotong gitu gambarnya yang muncul cuma 1/4 bagian dari atas aja.. itu gimana ngaturnya yah ?

REPLY

Info yang menarik dan sangat bermanfaat. Keren gan...

REPLY

Mantep gan, kalo bisa bikin tutorial yang slide otomaris gan. jadi bentuknya kayak label gitu. makasih gan.



Kunjungi Kami: Sosio Prores

REPLY

ok nanti saya coba
thx kunjungannya

REPLY

@imaruu, @suyanto
thanks for visiting

REPLY

g'iso sempurna boss dadine

REPLY

coba lebih jelasnya gmn permasalahan mas?

REPLY

tanpa permisi, untuk tuan besar problogiz yang terhormat, artikelnya saya culik yah ke blog saya.. hhmmm mau lihat hasilnya.. blok & klik kanan URL dibawah ini+open :
http://azhariian.blogspot.com/2013/05/membuat-image-accordion-slider.html

REPLY
Komentar ini telah dihapus oleh pengarang.

Ternyata tulisannya gak muncul nih. Kenapa ya? :(
Saya melakukan pengubahan untuk size width dan height-nya.
Mohon solusinya u,u

REPLY

aaaa sudah ding, hihi
sukses nih tutornya :D thankyouuuu

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|