Demo :
 |
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah <body>
........
diatas </body>
<table border="0" cellpadding="0">
<tr>
<td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFV72iCmlKTLDVCfDc786fLsp23KCbXLFwYWrzMrTevKnSSnAvQoD9AHk7BpQNZSLQMDTuP9lDnlYB4Hclm56hDYwLnIst0YSSlq9n169Ee_s9n64Mnl3NF7CMaMJHe9nbqx0kKgS6E_AY/s1600/city+data.jpg" width="400" height="264" name="photoslider"/></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center">
<script type='text/javascript'>
//<![CDATA[
/*
Foto Slider dengan teks keterangan By Kevin Adams (kadams@kyk.net)
*/
var photos=new Array()
var text=new Array()
var which=0
var what=0
//Ganti dengan URL gambar anda :
photos[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFV72iCmlKTLDVCfDc786fLsp23KCbXLFwYWrzMrTevKnSSnAvQoD9AHk7BpQNZSLQMDTuP9lDnlYB4Hclm56hDYwLnIst0YSSlq9n169Ee_s9n64Mnl3NF7CMaMJHe9nbqx0kKgS6E_AY/s1600/city+data.jpg"
photos[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfqJhqjW0Z-f-XanUKUEOPK5iYzhYaVH3YmTqXFEYPnt0G2pJo-W1q-9x09OlJKIs_iIHknbCvfHEKxDiXJ_dgBVm28TlYQZ1dt7fUTEU0UKxmS8Zf-O1Iy2viQ7NNzHqsW-Ya3Sn0ann/s1600/hiren.jpg"
photos[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFsY5vEWcj3bHcQC6kbMYcYTV77dLAdsbI42gvUunj5OmmrZdf8Hi-rz6lLuti6ijKfuhuA7jD-wQFaQ7MVBDoH22CiRuvqNUkhEEB8jQ1zVf1fditCMkwxa8zMXlV5zFglQayRZIQdeiD/s1600/singapore.jpg"
photos[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGif14d5WMVNPQLItl5g-57tQuLgkatt8kRR1wDhcgTwCWkOz3ccSUqYuPXnVfxlm_2azYzPpTc780-A10NNq44bXOrkjDSOUaNku68PcY_UYHClHbHXBie7pTmUOz_LJ_pl7EoviqjgyM/s1600/soutra.jpg"
photos[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYvIobjgKpum9xN0jtnUL-tAFy8QjedrzFAEekHW8srp6T6NTPm6pyjssT0izjrR9RCJngIegME-FvZfkeqaxCmBnHOYsqvP2r0GeV4mpRmsIgMQdy4_TMfjaxSqL0071s5uKNu0qoa_2D/s1600/topix.jpg"
//Ganti dengan Deskripsi:
text[0]="Keterangan 1"
text[1]="Keterangan 2"
text[2]="Keterangan 3"
text[3]="Keterangan 4"
text[4]="Keterangan 5"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
//]]>
</script>
<p><input type="text" name="description" style="width:100%" size="50"/></p>
<p><input type="button" value="Back" name="B2"
onClick="backward()"/> <input type="button" value="Next" name="B1"
onClick="forward()"/><br />
<a href="#" onClick="which=1;what=1;backward();return false">Start Over</a></p>
</div>
</form>
</td>
</tr>
</table>
Credit : JavaScript Kit
Alhamdulillah
0 comments:
Posting Komentar