Jquery Slide Show Versi 3

Jquery slide show versi 3 ini hanya menampilkan gambar dengan ketrangan yang sanggup diatur tempatnya, sanggup diatas gambar maupun dibawah gambar, tinggal menentukan mana yang tampilannya lebih oke...!!

Demo : perhatikan gambar dibawah ini :



CARA MEMBUATNYA :

LANGKAH PERTAMA

1. Masuk ke Blogger
2. Pilih Rancangan bab Edit HTML.
3. Copy arahan dibawah ini lalu paste sempurna diatas arahan </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;#s3slider&#39;).s3Slider({
timeOut: 10000
});
});
</script>


1. Kedua file Javascript sanggup anda ganti dengan milik anda sendiri
2. Kode timeOut: 10000 , merupakan kecepatan pergantian image. Semakin kecil angkanya semakin cepat pergantiannya. Silakan anda ganti angkanya dengan kecepatan yang anda inginkan.
4. Selanjutnya, copy arahan dibawah ini lalu paste sempurna diatas arahan ]]></b:skin>

#s3slider {
border:5px solid white;
width:660px;
height:290px;
position: relative;
overflow: hidden;
}

#s3sliderContent {
margin: 0px; padding:0px;
width:660px;
position: absolute;
bottom: 0;
margin-left: 0;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
left: 0;
text-indent: 0px;
font: 20px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:660px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: block;
bottom: 0;
}
.clear {
clear: both;
}
5. Keterangan :
1. Slide show ini disetting dengan lebar width:660px; dan tinggi height:290px; Silakan nada ganti lebar dan tingginya sesuai dengan keperluan.
2. Huruf pada keterangan gambar berukuran font: 20px , silakan anda ganti dengan ukuran yang anda inginkan.
3. Keterangan gambar diletakkan dibagian bawah gambar. Jika anda ingin meggantinya menjadi diatas gambar, ganti kode bottom: 0; menjadi top: 0; .Ingat arahan bottom: 0; ada dua, ganti kedua-duanya.
4. Boder dari slide show berwarna putih border:5px solid white; ganti dengan warna pilihan anda
   
5. Jika sudah jawaban mengedit pada bab pertama, klik tombol Simpan Template.

LANGKAH KEDUA

1. Masuk ke Rancangan bab Elemen Halaman.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy code dibawah ini lalu paste pada kolom yang tersedia.
   
   <div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="Url/alamat link sasaran dari gambar 1"><img src="Url/Alamat gambar 1"/></a>
<span>Keterangan/uraian singkat dari gambar 1</span>
</li>
<li class="s3sliderImage">
<a href="Url/alamat link sasaran dari gambar 2"><img src="Url/Alamat gambar 2"/></a>
<span>Keterangan/uraian singkat dari gambar 2</span>
</li>
<li class="s3sliderImage">
<a href="Url/alamat link sasaran dari gambar 3"/><img src="Url/Alamat gambar 3"/></a>
<span>Keterangan/uraian singkat dari gambar 3</span>
</li>
<li class="s3sliderImage">
<a href="Url/alamat link sasaran dari gambar 4"/><img src="Url/Alamat gambar 4"/></a>
<span>Keterangan/uraian singkat dari gambar 4</span>
</li>
<li class="s3sliderImage">
<a href="Url/alamat link sasaran dari gambar 5"/><img src="Url/Alamat gambar 5"/></a>
<span>Keterangan/uraian singkat dari gambar 5</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

1. Tulisan Url/alamat link sasaran dari gambar 1, 2,3, 4 dan 5 anda ganti dengan link sasaran yang akan dituju saat dilkik pengunjung
2. Tulisan Url/Alamat gambar 1, 2, 3, 4 dan 5 anda anti dengan Url/alamat gambar yang ingin ditampilkan.
3. Tulisan Keterangan/uraian singkat dari gambar 1, 2, 3, 4 dan 5 sanggup anda ganti dengan pesan yang ingin disampaikan pada slide show
   
5. Setelah jawaban pengeditan, klik tombol Simpan.
6. Lihat Slide show pada blog anda.
   

Selamat mencoba,semoga bermanfaat...

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini