Create your Own Simple Slideshow & Ads

category: blogging tips

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>

• 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"

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[..]=".........................."

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!