Today i will tell you how to make simple image slideshow to your blog.
1) Go in Layout tab in your blogger.
2) Click on the Add a Gadget. Select Html/JavaScript gadget from the opened window.
3) Add the below code in the content field of the gadget.
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1_url"
var image2=new Image()
image2.src="image2_url"
var image3=new Image()
image3.src="image3_url"
//-->
</script>
</head>
<body>
<img src="startimg_url" name="slide" width="400" height="400" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1000)
}
slideit()
//-->
</script>
</body>
</html>
4)Replace your image url with img1_url, img2_url and img3_url. Change the startimg_url with the url of the image which will start the slideshow.
5)click on save and you have done it.
6)This given code is basically for only three images.If you want to add images do the following steps.
i)let's say you want to add 2 more images to your slideshow.
then just below this line image3.src="image3_url" paste the following code:
8) Now if you want to change the dimensions of your slideshow then find this line.
<img src="startimg_url" name="slide" width="400" height="400" />
change the value in blue color according to your need.
9) An example of this slideshow is below :
1) Go in Layout tab in your blogger.
2) Click on the Add a Gadget. Select Html/JavaScript gadget from the opened window.
3) Add the below code in the content field of the gadget.
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1_url"
var image2=new Image()
image2.src="image2_url"
var image3=new Image()
image3.src="image3_url"
//-->
</script>
</head>
<body>
<img src="startimg_url" name="slide" width="400" height="400" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1000)
}
slideit()
//-->
</script>
</body>
</html>
4)Replace your image url with img1_url, img2_url and img3_url. Change the startimg_url with the url of the image which will start the slideshow.
5)click on save and you have done it.
6)This given code is basically for only three images.If you want to add images do the following steps.
i)let's say you want to add 2 more images to your slideshow.
then just below this line image3.src="image3_url" paste the following code:
var image4=new Image()
image4.src="image4_url"
var image5=new Image()
image5.src="image5_url"
ii) now find this line " if (step<3) ".Change the value marked in the red to 5.this value is equal to the no. of images in your slideshow. now save it and you finish.
7) Do you want to change the speed of your slideshow ? Find this line
setTimeout("slideit()",1000)
the value in green color represents the time period between the change of images.this time period is in milliseconds. Here 1000 represents 1 second. If you increase the value then your slideshow will become faster.
<img src="startimg_url" name="slide" width="400" height="400" />
change the value in blue color according to your need.
9) An example of this slideshow is below :
0 comments :
Post a Comment