JQUERY SLIDE SHOW VERSI 4

1. 
   

CARA MEMBUATNYA :

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

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlSr0ZiI/AAAAAAAACSg/e2qwCQ5iGlA/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlQpwAFI/AAAAAAAACSk/ElAPHzwEvIQ/bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
Slide show ini disetting pada lebar yang berwarna biru (width:400px;) dan tinggi ( height:250px;) .Silahkan anda sesuaikan ukurannya dengan tempat menaruh slide show ini. Seandainya takut tampilannya idak keruan, lebar dan tinggi tidak perlu dirubah.
Bacckground berupa image (warna merah) adalah simpanan EPG Studio. Dapat anda ganti dengan milik anda sendiri.
Selanjutnya copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>
Kedua file js (warna biru) yang digunakan diatas adalah file js simpanan EPG Studio. Dapat anda ganti dengan file js simpanan anda sendiri.
Angka 5000 merupakan pengaturan kecepatan pergantian gambar slide show, semakin kecil angkanya semakin cepat pertukaran gambarnya. Silakan anda ganti dengan kecepatan yang anda inginkan.
Setelah selesai mengedit kode-kode diatas, klik tombol Simpan Template.