Sunday, April 15, 2012

Add Moving Slideshow For Blogger


Moving slideshow is a cool gadget for blogger. When you place the mouse on the moving slideshow, the widget stops moving. The Gadget or widget contains some important posts with their links. You can arrange the special posts with images for your readers. All you need is view a demo. Generally it is placed at the header of your blog



VIEW A NICE DEMO





View demo




  • Go to Blogger → Design tab → Page Elements







  • "Add a Widget" → "HTML/JavaScript" Widget







  • Copy and Paste the following code inside the Widget and save








  • <script type="text/javascript">

    /***********************************************
    * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.edutechnology.net)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.edutechnology.net/ for full source code
    ***********************************************/


    //Specify the slider's width (in pixels)
    var sliderwidth="960px"
    //Specify the slider's height
    var sliderheight="150px"
    //Specify the slider's slide speed (larger is faster 1-10)
    var slidespeed=2
    //configure background color:
    slidebgcolor="#ffffff"

    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    leftrightslide[0]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[1]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[2]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[3]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[4]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[5]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[6]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[7]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[8]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[9]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[10]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'
    leftrightslide[11]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image" border=1></a>'

    //Specify gap between each image (use HTML):
    var imagegap=" "

    //Specify pixels gap between each slideshow rotation (use integer):
    var slideshowgap=5


    ////NO NEED TO EDIT BELOW THIS LINE////////////

    var copyspeed=slidespeed
    leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
    var iedom=document.all||document.getElementById
    if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
    var actualwidth=''
    var cross_slide, ns_slide

    function fillup(){
    if (iedom){
    cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
    cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
    cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
    actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
    cross_slide2.style.left=actualwidth+slideshowgap+"px"
    }
    else if (document.layers){
    ns_slide=document.ns_slidemenu.document.ns_slidemenu2
    ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
    ns_slide.document.write(leftrightslide)
    ns_slide.document.close()
    actualwidth=ns_slide.document.width
    ns_slide2.left=actualwidth+slideshowgap
    ns_slide2.document.write(leftrightslide)
    ns_slide2.document.close()
    }
    lefttime=setInterval("slideleft()",30)
    }
    window.onload=fillup

    function slideleft(){
    if (iedom){
    if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
    cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
    else
    cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

    if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
    cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
    else
    cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

    }
    else if (document.layers){
    if (ns_slide.left>(actualwidth*(-1)+8))
    ns_slide.left-=copyspeed
    else
    ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

    if (ns_slide2.left>(actualwidth*(-1)+8))
    ns_slide2.left-=copyspeed
    else
    ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
    }
    }


    if (iedom||document.layers){
    with (document){
    document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
    if (iedom){
    write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
    write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
    write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
    write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
    write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('</ilayer>')
    }
    document.write('</td></table>')
    }
    }
    <a style="font-size:10px; font-weight:bold; color:#3B78CD; text-decoration:underline;" href='http://www.edutechnology.net/' target='_blank'>Edutechnology.Net</a>
    </script>


  • Save the Gadget and done







  • You also can change the speed and increase your article numbers of the normal widget . I already highlighted changes

    Loved the article ? Spend only 5 seconds to share the article with your friends

    0 comments:

    Click Here To add Comment