Create your Own Simple Slideshow & Ads
category: blogging tips
Let's do it!
2. Go to layout.
3. Add new gadget & pick [Image] gadget.
4. Upload your images one by one.
When there are two images, just replace the URL with URL you kept on notepad in randomimages[0] & randomimages[1] . If the images are more than two, add & type the index randomimages[0],[1],[3] .... and paste images URL into it, as follows:
Do not forget to setup the slide speed - delay. Find this script: var delay=7000 //set delay in miliseconds. Change [7000] into other - as you wish. Finally, save your work & done!
Create Simple Slide Image
Creating simple slideshow or ads for blogspot blogger is very easy. What you have to do is as follows:- First, Design your images.
- Second, Store your images into blogspot host.
- Third, Place javascript into HTML code
Let's do it!
Design your images
Here, I create two simple images by using adobe photoshop. I recommend to use Gimp (free software - open source - linux edition and gimp can run under windows) for better size and performance. Create slides - ads as attractive as possible to attract visitors to click on slide.
Pick common size
as slide - ads size, e.g. 160 x 600, 300 x 280, 729 x 90, and the size you wish for your own blogspot blog.
Store your images into blogspot host
After finishing with image design, store them into blogspot host. Why should blogspot host? Because blogspot host is where blogspot blog is also stored. This is good for loading page. If you store images to other hosting services - provider, slideshow will take long enough to load perfectly. Besides, you can use JPG or GIF formatted images for small size to help better loading page.
How to store them
1. Login to your blogspot blog.2. Go to layout.
3. Add new gadget & pick [Image] gadget.
4. Upload your images one by one.
After uploading one image successfully - which is browsed from your computer - do not click [back], [cancel] or [save] button. Do right click on the image & choose [Copy image location] or [Copy link location] and paste the link into notepad and then click [cancel] button. Do that every time images successfully uploaded.Now, images has been successfully stored in blogspot host.
Place javascript into HTML code
The last episode is to place javascript code into HTML Code, as follows:- Go to layout & add a new gadget - choose HTML/Javascript gadget.
- Copy & paste this following code into it.
<script>
var delay=7000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4SN7bKmwQmr_v_5So1tBUzxQ4WKPF_cQWQljaQVjRzHkbw9ERvZlDZzfBq34XybxblPls6GWBNcuf1GC6zqzlNAHrdQBF9w659rltImvtycbg4RT7yV29yfV2_dEggspLpUMkereVtzIx/s1600/ads1.png"
randomimages[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuAuU-Cd-526j3oToWKIt8SoXi09lCAn9Q3mPVBap1uCmgoGJBdNP2CRwmnBQFjJxi2fmII5N4YG_cusYGu8olW18l51nkNE-WMAbIwYqhTRvJ93qERNaeCoSC8METCkGwS6t57MnDJF_/s1600/ads2.png"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'
+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
var delay=7000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4SN7bKmwQmr_v_5So1tBUzxQ4WKPF_cQWQljaQVjRzHkbw9ERvZlDZzfBq34XybxblPls6GWBNcuf1GC6zqzlNAHrdQBF9w659rltImvtycbg4RT7yV29yfV2_dEggspLpUMkereVtzIx/s1600/ads1.png"
randomimages[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuAuU-Cd-526j3oToWKIt8SoXi09lCAn9Q3mPVBap1uCmgoGJBdNP2CRwmnBQFjJxi2fmII5N4YG_cusYGu8olW18l51nkNE-WMAbIwYqhTRvJ93qERNaeCoSC8METCkGwS6t57MnDJF_/s1600/ads2.png"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'
+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
- Find this following script in that javascript code:
randomimages[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4SN7bKmwQmr_v_5So1tBUzxQ4WKPF_cQWQljaQVjRzHkbw9ERvZlDZzfBq34XybxblPls6GWBNcuf1GC6zqzlNAHrdQBF9w659rltImvtycbg4RT7yV29yfV2_dEggspLpUMkereVtzIx/s1600/ads1.png"
randomimages[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuAuU-Cd-526j3oToWKIt8SoXi09lCAn9Q3mPVBap1uCmgoGJBdNP2CRwmnBQFjJxi2fmII5N4YG_cusYGu8olW18l51nkNE-WMAbIwYqhTRvJ93qERNaeCoSC8METCkGwS6t57MnDJF_/s1600/ads2.png"
randomimages[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuAuU-Cd-526j3oToWKIt8SoXi09lCAn9Q3mPVBap1uCmgoGJBdNP2CRwmnBQFjJxi2fmII5N4YG_cusYGu8olW18l51nkNE-WMAbIwYqhTRvJ93qERNaeCoSC8METCkGwS6t57MnDJF_/s1600/ads2.png"
When there are two images, just replace the URL with URL you kept on notepad in randomimages[0] & randomimages[1] . If the images are more than two, add & type the index randomimages[0],[1],[3] .... and paste images URL into it, as follows:
randomimages[0]="your-image-url1"
randomimages[1]="your-image-url2"
randomimages[2]="your-image-url3"
randomimages[3]="your-image-url4"
randomimages[..]=".........................."
randomimages[1]="your-image-url2"
randomimages[2]="your-image-url3"
randomimages[3]="your-image-url4"
randomimages[..]=".........................."
Do not forget to setup the slide speed - delay. Find this script: var delay=7000 //set delay in miliseconds. Change [7000] into other - as you wish. Finally, save your work & done!
