Jquwry slide show versi 5

Pilihan kelima dari Jquery Slide Show menggunakan dua file java script yaitu s3Slider.js dan jquery.min.js. Tampilan kali ini, anda dapat mengatur judul dan konten yang dapat diletakan dibagian atas dan dibagian bawah atau variasi dari keduanya.

Demo : Perhatikan gambar di bawah ini :



Pada contoh gambar diatas, judul dan konten, ditampilkan dibagian atas.

CARA MEMBUATNYA :

LANGKAH PERTAMA

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Edit HTML.
3. Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

#slider {
width: 660px; /* samakan dengan lebar image */
height: 300px; /* samakan dengan tinggi image */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 660px; /* samakan dengan lebar image */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 660px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}



4. Keterangan :
   1. Kode width: 660px; merupakan ukuran lebar dari slide show. Ganti angkanya sesuai dengan keinginan.
   2. Kode height: 300px; merupakan ukuran tinggi slide show. Ganti angkanya sesuai keinginan.
   3. Kode width: 660px; merupakan lebar dari tulisan judul dan uraian singkat. Lebarnya harus sama dengan lebar pada point 1 yaitu lebar dari gambar width: 660px;

Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/epgstudiosite/javascript/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#slider&#39;).s3Slider({
timeOut: 5000 /* ganti angka ini dengan kecepatan yang diinginkan */
});
});
</script>

Keterangan :

1. Kedua file javascript diatas (warna kuning) merupakan file simpanan EPG Studio, Silahkan anda ganti dengan file javascript milik anda sendiri.
2. Angka timeOut: 5000 merupakan ukuran kecepatan pergantian gambar. Dapat anda ganti dengan kecepatan yang diinginkan. Makin besar angkanya makin lambat pergantian gambarnya

Klik tombol Simpan Template

LANGKAH KEDUA

1. Masuk ke bagian Elemen Halaman
2. Klik Tambah gadget
3. Pilih HTML/Javascript.
4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   <div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="URL/alamat yang dituju dari gambar 1"><img src="Url/alamat gambar 1" width="660px" height="300px" /></a>
<span class="top"><strong>Judul gambar 1</strong><br />Uraian gambar 1
</span>
</li>
<li class="sliderImage">
<a href="URL/alamat yang dituju dari gambar 2"><img src="Url/alamat gambar2" width="660px" height="300px" /></a>
<span class="top"><strong>Judul gambar 2</strong><br />Uraian gambar 2</span>
</li>
<li class="sliderImage">

<a href="URL/alamat yang dituju dari gambar 3"><img src="Url/alamat gambar 3" width="660px" height="300px" alt="3" /></a>
<span class="top"><strong>Judul gambar 3</strong><br />Uraian gambar 3</span>
</li>
<li class="sliderImage">
<a href="URL/alamat yang dituju dari gambar 4"><img src="Url/alamat gambar 4" width="660px" height="300px" /></a>
<span class="top"><strong>Judul gambar 4</strong><br />Uraian gambar 4</span>
</li>

<li class="sliderImage">
<a href="URL/alamat yang dituju dari gambar 5"><img src="Url/alamat gambar 5" width="660px" height="300px" /></a>
<span class="top"><strong>Judul gambar 5</strong><br />Uraian gambar 5</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>



5. Keterangan:
   1. Ukuran gambar disetting dengan width="660px" height="300px" .Samakan ukuran tersebut dengan ukuran pada penyetingan di bagian pertama'
   2. Ganti tulisan URL/alamat yang dituju dari gambar 1, 2, 3, 4 dan 5 dengan alamat link yang ingin dituju jika pengunjung mengklik gambar
   3. Tulisan top menunjukkan bahwa judul beserta keterangan singkat dari gambar berada di bagian atas. Ganti tulisan tersebut dengan bottom jika ingin judul beserta keterangan singkat dari gambar berada di bagian bawah. Bisa juga divariasikan, misalnya : gambar 1, 3 dan 5 pilih top sedangkan sisanya yaitu gambar 2 dan 4 pilih bottom
   4. Ganti tulisan Url/alamat gambar 1, 2, 3, 4 dan 5 dengan alamat gambar yang ingin ditampilkan.
   5. Ganti tulisan Judul gambar ,1, 2, 3, 4dan 5 dengan judul yang ingin ditampilkan.
   6. Ganti tulisan Uraian gambar 1, 2, 3, 4 dan 5 dengan uraian singkat dari judul yang ditampilkan.


6. Setelah selesai pengeditan pada langkah kedua, klik tombol Simpan
7. Lihat Slide Show pada blog anda.