Jquery Slide Show

Langkah Pertama:

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. 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;#s3slider&#39;).s3Slider({
timeOut: 10000
});
});
</script>

NB:

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.

7. 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;
}

NB:

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 Kedua:

1. Pilih Rancangan, Add Gadget kemudian klik HTML/Java Script.
2. Copy Paste script di bawah ini ke dalam gadget HTML/Java Script anda.

<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>

3. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post