Pure CSS3 Slider In Blogspot Blog Blogger

Ok sobat setelah sebelumnya seocips telah membagikan Image slider yang mirip dengan slider ini di artikel sebelumnya yaitu Image Slider Accordian style nah kali ini slidernya sedikit berbeda dan kelihatan lebih cutex. Efek slidenya akan muncul ketika sobat mengarahkan kursor pointer mouse pada salah satu gambar di slide ini.

Anda dapat meletakanseluruh kode dibawah ini pada widget Blog atau pada postingan Blog ( mode HTML ) atau anda dapat meletakan kode yang di awali <style> sampai </style> diatas kode </head> dan sisanya pada widget Blog, atau di dalam template Blogger. Ok langsung saja berikut adalah kodenya..

HTML + CSS

<div id="slider">
    <div id="allpic">
      <img src="http://www.coolusbtoys.com/wp-content/Angry-Birds-space-Calendar-2013.jpg"/>
    </div>
    <div id="allpic">
      <img src="http://i4.ytimg.com/sh/G2lfbxaIEy4/showposter.jpg?v=4fbb28d7"/>
    </div>
  <div id="allpic">
      <img src="http://ec2.images-amazon.com/images/I/41hmD1hLmBL._SL500_AA300_.jpg"/>
    </div>
  <div id="allpic">
      <img src="http://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
    </div>
  <div id="allpic">
      <img src="http://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
    </div>
</div><!-- slider end -->
<style>
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:10px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
</style>

Info :

Lebar slider ini adalah 630px.
Jumlah gambar: 5
Ukuran gambar : tinggi 300px dan Lebar 300px.
Kode berwarna biru diatas adalah link gambarnya, silahkan diganti dengan gambar anda.
Jika sobat ingin gambarnya ada link tujuannya sobat dapat mengedit semua kode dibawah kode  <div id="allpic"> menjadi misalnya :
<a href="http://www.seocips.com" ><img src="http://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/> </a>
Kode merah: Link tujuan
Kode Biru : Link Gambar.



Silahkan di edit untuk menyesuaikan dengan Blog anda. Ok sekian, semoga bermanfaat. Terimakasih.
0 Komentar untuk "Membuat Slider Gambar dengan CSS ( Pure CSS Slider )"