Slideshow Responsive sederhana dengan Jquery

Slideshow Responsive sederhana dengan Jquery

Slideshow Responsive sederhana dengan Jquery - ResponsiveSlides.js adalah plugin jQuery kecil yang menciptakan slider responsif dengan menggunakan elemen di dalam sebuah wadah. ResponsiveSLides.js bekerja pada berbagai browser termasuk semua versi IE dari IE6 ke atas. Ia juga menambahkan css max-width dukungan untuk IE6 dan browser lain.

Untuk menggunakan Slideshow ini kita membutuhkan jQuery versi 1,6 atau lebih tinggi dan semua gambar harus memiliki ukuran pixel yang sama untuk menghindari kekacauan pada slide. Perbedaan terbesar untuk plugin slider responsif ini dengan yang lain adalah ukuran file (Hanya 1.4kb) Jadi tidak akan membebani kinerja website anda.

Perhatian : Untuk melihat Demo Slideshow bisa kunjungi halaman depan blog ini

Untuk cara pemasangannya cukup mudah
1. Login ke akun blogger kalian jika sudah, masuk ke bagian Template>>Edit HTML
2. Buat 1 kolom elemen baru di atas postingan, caranya copy kode CSS di bawah ini sebelum kode ]]></b:skin> untuk mempermudah pencarian kode bisa tekan Ctrl + F

CSS CODE

/* Slide Content */
.slide-wrapper 
{
	padding:0 auto;
	margin:0 auto;
	width:auto;
	float: left;
	word-wrap: break-word;
	 overflow: hidden
}
.slide 
{
	color: #666666;
	line-height: 1.3em
}
.slide ul 
{
	list-style:none;
	margin:0 0 0;
	padding:0 0 0
}
.slide li 
{
	margin:0;
	padding-top:0;
	padding-right:0;
	padding-bottom:.25em;
	padding-left:0px;
	text-indent:0px;
	line-height:1.3em
}
.slide .widget 
{
	margin:0px 0px 6px 0px
}

3. Jika sudah Save template kalian

ok elemen baru sudah kita buat sekarang kita masuk ketahap bagian slideshow-nya

1. Masuk kebagian Tata Letak, lalu Add Gadget>>HTML/Javascript. lalu isikan kode di bawah ini

<style type="text/css">
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>
<ul class="rslides">
  <li><img src="http://responsiveslides.com/1.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/2.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/3.jpg" alt=""></li>
</ul>
<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

2. Jika sudah Silahkan simpan

*Keterangan
- Kode Merah : Jika di template kalian sudah terdapat kode ini, sebaiknya anda hapus kode ini
- Kode Hijau : Javascript Slideshow
- Kode Biru : Ganti dengan URL gambar kalian