Jquery Slide Show Versi 5

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

Demo : Perhatikan gambar di bawah ini :



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

CARA MEMBUATNYA :

LANGKAH PERTAMA

1. Masuk ke Blogger.
2. Pilih Rancangan bab Edit HTML.
3. Copy instruksi dibawah ini lalu paste sempurna diatas instruksi ]]></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 goresan pena judul dan uraian singkat. Lebarnya harus sama dengan lebar pada point 1 yakni lebar dari gambar width: 660px;

Copy instruksi dibawah ini lalu paste sempurna diatas instruksi </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 bab Elemen Halaman
2. Klik Tambah gadget
   
3. Pilih HTML/Javascript.
4. Copy instruksi dibawah ini lalu 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="Pilihan kelima dari Jquery Slide Show memakai dua file java script yakni s JQUERY SLIDE SHOW VERSI 5" /></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 bab pertama'
   2. Ganti goresan pena URL/alamat yang dituju dari gambar 1, 2, 3, 4 dan 5 dengan alamat link yang ingin dituju kalau pengunjung mengklik gambar
   3. Tulisan top menunjukkan bahwa judul beserta keterangan singkat dari gambar berada di bab atas. Ganti goresan pena tersebut dengan bottom kalau ingin judul beserta keterangan singkat dari gambar berada di bab bawah. Bisa juga divariasikan, contohnya : gambar 1, 3 dan 5 pilih top sedangkan sisanya yakni gambar 2 dan 4 pilih bottom
   4. Ganti goresan pena Url/alamat gambar 1, 2, 3, 4 dan 5 dengan alamat gambar yang ingin ditampilkan.
   5. Ganti goresan pena Judul gambar ,1, 2, 3, 4dan 5 dengan judul yang ingin ditampilkan.
   6. Ganti goresan pena Uraian gambar 1, 2, 3, 4 dan 5 dengan uraian singkat dari judul yang ditampilkan.
      


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

Selamat mencoba agar bermanfaat...

Sumber : s3Slider jQuery plugin
Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini