In order to make it easier for those who are trying to create the same slideshow effect for their powerpoint, here is a tutorial.

1. 1st off you are going to need to save your Powerpoint as all images. In order to do this
2. Next you are going to want to take those images and resize them to 500x375 in order to make it fit properly on the blog page. If you do not have a photo editing program, Photobucket.com has a nice photo editor that will allow you to do that if you host these images there, which brings me to the next step.
3. You will need to host these images. I prefer Photobucket.com mainly because it is simple, free and has that image resize function. If Photobucket isn't working for you, you can use this service Bay Img, created by , which also ensures your images will not be taken offline.
4. Now you will need to create a new blog post and choose the Edit HTML tab at the top instead of Compose.
5. Then copy and paste this code under the Edit HTML tab.
   **NOTE : You need to edit this code so don't press publish post** <script language="JavaScript1.2"> //Presentational Slideshow Script- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for legal use var slideshow_width='500px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist) var slideshow_height='375px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist) var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds) var slidebgcolor="white" var dropimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed dropimages[0]="putimageurlhere1.jpg" dropimages[1]="putimageurlhere2.jpg" dropimages[2]="putimageurlhere3.jpg" var droplinks=new Array() //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked: droplinks[0]="putimageurlhere1.jpg" droplinks[1]="putimageurlhere2.jpg" droplinks[2]="putimageurlhere3.jpg" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<dropimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=dropimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>') else document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>') var curpos=parseInt(slideshow_width)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=linkindex=0 var nextimageindex=1 function movepic(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>' tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=dropimages[curimageindex] linkindex=curimageindex curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0 } function rotatelink(){ if (droplinks[linkindex]!="") window.location=droplinks[linkindex] } function resetit(what){ curpos=parseInt(slideshow_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

6. Now you need to change the "dropimages" and "droplinks" lines to point to the URL of where you have hosted your files. In Photobucket the line you should copy is called "Direct Link."
7. You might also have more then three slides. What are you going to do? Just copy the entire "dropimages" and "droplinks" lines and increment the number by one. So for example, the last line is "dropimages[2]="putimageurlhere.jpg"". Right under neath that put "dropimages[3]="putimageurlhere.jpg"". Repeat this for the droplinks as well.
8. Now you can go ahead and say Publish post.
9. And error should come up and say something about title or body HTML errors. Underneath there is a check box that will allow you to stop showing title or body HTML errors for the post. Check that check box and then press publish post.
10. Congratulations, you should now have an image slideshow just like the one below. Hope that helps. Check out my other tutorial further down the page to see how use HTML to enhance your blog posts.
    0 Comment