Jquery slide show versi 3 ini hanya menampilkan gambar dengan ketrangan yang dapat diatur tempatnya, bisa diatas gambar maupun dibawah gambar.
Contoh seperti gambar dibawah ini :
LANGKAH 1
1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML.
3. 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() {
$('#s3slider').s3Slider({
timeOut: 10000
});
});
</script>
1. Kedua file Javascript dapat 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 kode dibawah ini kemudian paste tepat diatas kode ]]></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;
}
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 kode 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 selesai mengedit pada bagian pertama, klik tombol Simpan Template.
LANGKAH 2
1. Masuk ke Rancangan bagian Elemen Halaman.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy code dibawah ini kemudian paste pada kolom yang tersedia.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="Url/alamat link target 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 target 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 target 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 target 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 target 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 target dari gambar 1, 2,3, 4 dan 5 anda ganti dengan link target yang akan dituju ketika 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 dapat anda ganti dengan pesan yang ingin disampaikan pada slide show
5. Setelah selesai pengeditan, klik tombol Simpan.
6. Lihat Slide show pada blog anda.
Read more: http://epg-studio.blogspot.com/2011/04/jquery-slide-show-3.html
0 komentar
Posting Komentar
Maaf' Komentar Link Akan Di Hapus..@@!!