Simple Image Slideshow

Demo :

---

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah ]]></b:skin>
........
diatas </head>

<style type="text/css">

#slideshowContainer{
width: 300px;
height: auto;
}

#imagecontainer img{
width:300px;
}

#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}

#backforthbuttons{
width:300px;
margin-top: 6px;
}

</style>
<script type='text/javascript'>
//<![CDATA[

// Simple Image Slideshow Script By http://www.javascriptkit.com/script/script2/indexit.shtml

//Tempat gambar dan link :
var numberslide=new Array()
numberslide[0]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXEqgdocKC8rrn7uexiWw6aL1bpzk0U0imQjagm3t-cpedMKnjbD5tyh0s8sR9gvktAu8sYNhzQ00xo3JAPCmLDxxDX9l0hWZJQyIow46fbLnqeHXuIXeikoERfMQRzAqsUVMX1x8u4g/s1600/ccr+parked.jpg", ""]
numberslide[1]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGw4WN0imhwe6Zz4FCtJBTIxQKNMiLx0cqZuKZoMBMlHeUxnZ5jcruGnAfsH1-ku5LP3QBQ0JTIyCHbRlgl4dyO_uMEYR9ad1s6YuzDqktnwrvLtSe50jxB5EJwlyqbEOeBXhh4l9ffw/s1600/ford+mustang.jpg", ""]
numberslide[2]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcwIErHfnlFZgE2qogq3xrpPtjY6HQD9RyQyCECwGWpy8I7RT5LhAHOL8WK85qL0Noa7V_bxksZJzqQlsNm0WXO3yopI_9Q8S_MHR1iVn53tu2btcWzOx_4dAYQqlq22UqKYTosANiNc/s1600/honda+fc+car.jpg", ""]
numberslide[3]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh97V2QJjQW_YuBAZmq7dlSwBMCOx8MQ4qgUJCo1Sy9kuOjwyiTH0hMVIF5gQPZzBiVWLySXSersDi9DQY5Sm1XBJepchV3bnhIPhWaD63-thagxjxiLOPa7Hx85UWKdN0-T8OMPsOyMus/s1600/kia+soul.jpg", ""]
numberslide[4]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QvrxwDExgfj2q1KflOD6fSe8fIMFkwYrQ-DNAjHaMnS4Yp0wuRV62_0IXjRCLPsn05FzqkpDfiNQGWGZ-ZXybuY_N4fNVG7TX-g31uetrwJlQZ6raBZq0H14IOLQfDSjrKLzGtOcse0/s1600/lamborghini.jpg", ""]
numberslide[5]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QvrxwDExgfj2q1KflOD6fSe8fIMFkwYrQ-DNAjHaMnS4Yp0wuRV62_0IXjRCLPsn05FzqkpDfiNQGWGZ-ZXybuY_N4fNVG7TX-g31uetrwJlQZ6raBZq0H14IOLQfDSjrKLzGtOcse0/s1600/lamborghini.jpg", ""]

var mylinktarget="" //link target
var mylinkcolor="white" //warna link nomor
var mylinkcolorSelected="red" //warna link dipilih

var imgborderwidth=0 //border gambar

/////Stop customizing here////////////////

var preloadit=new Array()
for (i=0;i<numberslide.length;i++){
preloadit[i]=new Image()
preloadit[i].src=numberslide[i][0]
}

var currentindex=""

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
for (i=1; i< numberslide.length; i++)
document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].style.color=mylinkcolor
}

function goforward(){
if (currentindex<numberslide.length-1)
changeslides(currentindex+1)
}

function goback(){
if (currentindex!=0)
changeslides(currentindex-1)
}

//]]>
</script>

penjelasan tempat URL gambar dan link anda :

numberslide[0]=["URL Gambar", "Link target"]

Link target jika tidak ada, kosongkan saja.

Jika ingin ditambahkan jumlah gambarnya, seperti ini :

numberslide[0]=["URL Gambar", "Link target"]
numberslide[1]=["URL Gambar", "Link target"]
numberslide[2]=["URL Gambar", "Link target"]
numberslide[3]=["URL Gambar", "Link target"]
numberslide[4]=["URL Gambar", "Link target"]
numberslide[5]=["URL Gambar", "Link target"]

Dan seterusnya terserah anda dan angka berwarna merah diurutkan !.

Penempatannya
dibawah <body>
........
diatas </body>

<div id="slideshowContainer">

<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial")
</script>
</div>

<div id="numberDiv">
<script type="text/javascript">
createnumbers()
</script>
</div>

<div id="backforthbuttons">
<a href="javascript:goforward()" style="float: right"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPx6SKNQz4yFdPKvoeO1T_nl6tgoqYjjRYx5MDWlJMb6NGGrjP5OdirDwV7RHzz5Ii_cvfVO4ueAUuI7k7VjZ6dbs9KcusNRj4CByHRKi5-500iPg1Npp8__HiK4XtVTi_HEzuIjW_Hi0/s1600/kanan.gif" border="0"/></a> <a href="javascript:goback()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVYSd7P-AOg9KhOzMijNt81LprqCxUbaqO5ufNgHyePLFUQ8ltFG2sZh9tRowghkIHRGgXr5mm_y5a0Nr4Ny9Mn9wRmAnlEaWCFgZzilcJblrt6oHkl0F1Dz2oZQka69cX0DILYELZYo/s1600/kiri.gif" border="0"/></a>
</div>

</div>

---

Credit : JavaScript Kit

Alhamdulillah