Tips membuat Slide Show ini menggunakan dua file java script serta kode-kode lainnya.
Sebagai contoh coba sobat amati gambar dibawah ini :
Cara Membuatnya :
Masuk ke Blogger
Pilih Rancangan bagian Edit HTML
Langkah Pertama :
Copy kode dibawah, kemudian paste dibawah kode : <body>
<script type="" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"judul image 1","desc":"Keterangan image 1"},{"id":"slide-img-2","client":"judul image 2","desc":"Keterangan image 2"},{"id":"slide-img-3","client":"jjudul image 3","desc":"Keterangan image 3"},{"id":"slide-img-4","client":"judul image 4","desc":"Keterangan image 4"},{"id":"slide-img-5","client":"judul image 5","desc":"Keterangan image 5"},{"id":"slide-img-6","client":"judul image 6","desc":"Keterangan image 6"},{"id":"slide-img-7","client":"judul image 7","desc":"Keterangan image 7"}];
</script>
Ganti tulisan Judul image dan keterangan image dengan tulisan yamg ingin ditampilkan
Langkah Kedua :
Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:20px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:550px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:550px;
height:52px;
margin:22px 0 0;
}
div#top div#nav ul{
float:left;
width:550px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:550px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
}
div#header div#slide-holder{
z-index:40;
width:550px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:550px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:550px;
height:46px;
display:none;
position:absolute;
background:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZax8SMwKoI/AAAAAAAACQU/jKYyP3pkefo/s128/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZatkNZ9vdI/AAAAAAAACQE/XnxeOeqYwF8/silde-nav.png);}
div#nav ul li a{background:url(https://lh5.googleusercontent.com/_1j80TgNqd_8/TZax-eNRtRI/AAAAAAAACQY/ci4_hxU0QgM/s912/header-bg.png) no-repeat;}
Ganti seluruh ukuran width yang berwarna kuning yang disesuaikan dengan lebar tempat meletakan slide show
Langkah Ketiga
Copy kode dibawah ini kemudian paste tepat diatas kode </head>
<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/epgstudiosite/javascript/scripts.js' type='text/javascript'/>
Klik Tombol Simpan Template
Langkah Keempat
- Masuk ke Dasbor
- Pilih Rancangan Bagian Elemen Halaman.
- Klik Tambah Gadget.
- Pilih HTML/Javascrpt
- Copy kode dibawah ini kemudian paste pada kolom yang tersedia
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayimDclcI/AAAAAAAACQ0/K75d647i9Bs/s912/nature-photo6.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayfqs2MiI/AAAAAAAACQw/WJQfcd1EK-g/s912/nature-photo5.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZaycXbtn7I/AAAAAAAACQs/eFOr4ZS0EZo/s912/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZaya8bZTwI/AAAAAAAACQo/PmJHp4a1-BY/s912/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZayQFzxRqI/AAAAAAAACQk/-ZHpEai9IG8/s912/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayM8T_5eI/AAAAAAAACQg/5Ld-3JKMqyM/s912/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayJcVzcEI/AAAAAAAACQc/nykm8K_RVZY/s912/nature-photo.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>
Terakhir klik save dan lihat hasilnya.
Source : epg-studio.blogspot.com/2011/04/jquery-slide-show-1.html
0 Response to "Cara Membuat Slideshow Jquery New Version"
Post a Comment