Slider Accordian Style

Memasang Slider Accordian Style
Seperti biasa Login ke akun blog Klik Entri halaman baru HTML
Copy kode dibawah ini,
pastekan kedalam halaman baru tersebut
kemudian klik simpan selesai

<style>
* {
 margin: 0;
 padding: 0;
}
body {
 background: #000;
 font-family: arial, verdana, tahoma;
}
/*Time to apply widths for accordian to work
Width of image =  40px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
 width: 805px; height: 320px;
 overflow: hidden;
 /*Time for some styling*/
 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);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
 width: 2000px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}
.accordian li {
 position: relative;
 display: block;
 width:  30px;
 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);
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to
 see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}
.accordian li img {
 display: block;
}
/*Image title styles*/
.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="http://Your Link.blogspot.co.id/">Judul 1</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 2</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 3</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 4</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 5</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
 </ul>
</div>

Sources by. Kode Play
Edited    by. Myscript2010 on Codepen

Penjelasan :
Terapkan Link Web dan Link Gambar yang berwarna orange sesuai  keinginan

DEMO SHOW

If you want to directly copy and paste you canDownload Here Slider Accordian