Auto-Scrolling [Text Or Image Slide Shows] Widgets For BlogSpot / Blogger Blogs

In case you have a lot of links in your blog’s BlogRoll or if you want to show all your favorite books list on the sidebar, but have limited space in it then this widget will be a great help for you !

You can put as many links/ listed items as you want in this widget, they will scrolling automatically unless the visitors hovers the mouse cursor on the widget, and as long as the cursor is placed on over the widget, the scrolling will be paused, and it will only resume once the mouse-cursor is removed from the widget.

It will be displayed like this:

BlogRoll
LINE OR IMAGE 1
LINE OR IMAGE 2
LINE OR IMAGE 3
LINE OR IMAGE 4
LINE OR IMAGE 5
ETC.

Here’s the simple procedure of adding the widget to your blog:
Log in to Blogger
Go to Layout section, and click on “Add a Gadget“, select as “HTML/JavaScript

Now this is the code to paste in to the widget:

<div class=”textwidget”>
<marquee direction=”up” width=”105″ onmouseover=”this.stop()” scrollamount=”2″ onmouseout=”this.start()” height=”200″ align=”left”>
LINE OR IMAGE 1
LINE OR IMAGE 2
LINE OR IMAGE 3
LINE OR IMAGE 4
LINE OR IMAGE 5
ETC.
</marquee></div>

NOTE: You can change or modify the highlighted code (in RED and BLUE), so as to suit your choice or blog.

You can also use hyperlinking for the images:

Featured Posts

Or you can even use a simpler version of this code:

<marquee behavior="scroll"direction="left">
<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />

<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
</marquee>

And it will be displayed like this:

Next Gen ComputersNext Gen Computers 500GB on a Disk500 GB Disks Amazing Flash DrivesFlash Drives History Of Mobile PhonesMobile Phones

113 thoughts on “Auto-Scrolling [Text Or Image Slide Shows] Widgets For BlogSpot / Blogger Blogs

  1. Hello Margot, when I checked your blog, I found the horizontal banners scrolling in proper manner. If you want to display them inside a box(of fixed length), then use this code:

    <table border="1" width="200"><tr>
    <td>THE ABOVE CODE FROM THE POST HERE</td>
    </tr></table>

  2. I couldn’t see any text “Red sox mommy”, what i could see is a widget with two banners scrolling upwards (with heading praying for harper)… and another widget with heading awards
    Can you tell me where exactly is the widget you are talking about ?

  3. Sorry, it’s the first one that has the “praying for Harper” button. What I’m referring to is that there appears to be spaces between some of the buttons within that scrolling widget. If you watch the widget that has the “praying for Harper” button, you will notice a space (gap) in between some of the buttons (images). For instance, there’s a space b/t the “on the Verge” button and the “Red Sox Mommy” button. There’s also more spaces if you keep watching. Thanks again. I don’t mean to be a bother, but I just don’t know how to get rid of the spaces. 🙂

  4. Ohk….

    I checked the source code of your blog, in the widget between the image banners(buttons) you will find these codes:

    <br/>

    just delete them…that's it
    and don't worry you are not bothering me….feel free to ask your queries here…

    Regards
    Sai

  5. Nice code…but sometimes it doesnt scroll the whole image on it…maybe my pc lagging? or its fine in your view…thanks anyway for the code..now i can simplify things in my blog 🙂

  6. Hi nourfadly80

    We are using “marquees” in this hack, which may have some issues with certain browsers, but that is very rare, although we can use javascripts for this, but that will slow down your blog’s loading, and it will not work in PC’s without javascripts installed.
    So do not worry, I have visited your blog, and found the widget in the perfect working condition….

    Regards
    Sai

  7. Hi PrissyGreen,

    I visited your blog, and found the widget working exactly as it should be, all the link banners are rolling perfectly, so I think you have done the troubleshooting yourself !
    BTW you have a nice blog ! Keep up the good work !

    Regards
    Sai

  8. Hi crakerlo,
    those are not simple marquee codes, but includes javacsript and css coding too, not very difficult, but will take some time, I can reply you regarding this after 2 days,
    can you plz reply here or mail me after 2 days!

    Regards
    Sai

  9. @ Mohammad and anyone, who is facing problem in this widget,

    Soon there’ll be a tutorial on making slide-shows, which will be much better than this method….so cheer up 🙂

  10. I’ve only been blogging for a little over a month but it seems like I’ve been looking for this code FOREVER! Who knew it was this simple? Thank you so much!

    I link back to great blog resources, I have added your site.

  11. I was so excited to find you.
    I am trying to add the horizontal slider but my images don’t appear. What do I type in place of the code for the image src – path to yourimage? for the image size as well.
    http://triciacohn.blogspot.com

    my images are in flickr which is what i typed but the image didn’t appear?

  12. Hello,

    If you want to shows pics from filkr, then why don’t you directly do it from the widget already given by Blogger.
    Click on “add a Gadget” and select “Slideshow” and then select Flickr in the drop down menu, and finally giv your ID to it !
    That’s it

    Regards
    Sai

  13. Hi, I want to add an image slider instead of the flickr widget which I do currently have but don’t like. I want something that moves like the one you have above. Just can’t figure out how to link my images?

  14. Do Like this and see the difference ;))

    above code div section plus change ( ) to < >

    (table width="100%" cellspacing="1")
    (tr)(td)
    Line1 or image 1
    (tr)(td)
    Line2 or image 2
    (tr)(td)
    Line2 or image 2
    (/td)(/tr)
    (/table)

  15. Hi Abraham,
    Thanks for the comment and advice, actually in the above examples both "blogroll" and "featured posts" widgets are inside the table.

    Basically you need to add this code (scrolling code) inside a table, like this:

    <table>
    <tr>
    <th>HEADING</th>
    </tr>
    <tr><td>
    SCROLLING CODE HERE</td></tr>
    </table>

    That's it

    Regards
    Sai

  16. hi divya i want to knw the code of new window or new tab i mean when someone clicks on scrolling posts it shuld get open in new window or tab pls help me n tell me how can i do this? thanx for ur all cool tricks u rocks…!!

  17. Thank you so much for this code! It works great. I've got about 100 images scrolling. I was wondering is there any way to randomize the order of the images?

    Thanks

  18. Hi, thanks for the code! I'm using it on my blog, however the marque doesn't cross the entire width of my blog. I keep fiddling with the width but it still only cover's 1/3 of the blog. I was wondering if you knew how to fix this, thank you so much!

    my blog: thebookbluff.blogspot.com
    (It's on the bottom of my blog 🙂

  19. When in the Edit Layout page, drag the widget further down. Presently it is one of your three bottom widgets (the center one), once you drag it to the bottom-most part of your blog, it will stretch to the entire width of your blog.

  20. Wow, that was fast! Thanks for your response 🙂 I've been trying to drag it lower but it's the only one on in the bottom middle widget, other than the "Add A Gadget" option on top of it. maybe I should try refreshing my page.

    Also, is there a way I can make the widget display the buttons in a single row? instead of 3? Thank you so much!

  21. There's another way to spread the widget across your blog, but first we should display it in a single row as you want.
    For that, simply delete the center tags from your widget, viz. two <center> tags and two </center> tags.
    Once you do this, I'll tell you how to push the widget to the bottom of your blog.

  22. I added the code to 2 widgets and they work perfectly….on Google Chrome, Firefox and Safari. I just had a reader tell me that my buttons are "all over the place" in Internet Explorer. I check my hubby's computer using IE and it is a mess. Do you know how to fix this 🙂

  23. Hi Kari,

    That is because you haven't linked the banners CORRECTLY to any page/blog.

    Instead of using the code like this:

    <http://mindiandelrey.blogspot.com/><img border="0" src="http://i730.photobucket.com/albums/ww302/jeppdogg/th_Mindismanicbutton-2.gif"/&gt;

    USE THIS:

    <a href="http://mindiandelrey.blogspot.com"><img border="0" src="http://i730.photobucket.com/albums/ww302/jeppdogg/th_Mindismanicbutton-2.gif"/></a&gt;

    Similarly do it for other banners too.

  24. Okay, I have fixed all the banners and the links now work, however it is now not scrolling. I have double checked to make sure I didn't delete something by mistake, but nothing is missing. Now what?

  25. I hope someone still reads this and responds. I have successfully implemented your code to the lower right of my blog at http://paganbydesign.blogspot.com, however, with an Internet Explorer browser, the images just sit there…all of them.

    If I move the "img" code up above the url code, then it will scroll in all browsers (even IE), but links to each image do not open.

    I'm not very experienced with this. Can you help me so this works in Internet Explorer too?

  26. Green Witch, I'm amazed it doesn't work in IE, since your links work fine on my iPad!

    Thanks for the infinite loop suggestion – will check it out 🙂

  27. @Green Witch
    First of all..thanks for helping others on this blog 🙂

    In your code, leave a "space" between the different elements of the script code, so instead of using this code:

    behavior="scroll"direction="up"width="200"

    use this:

    behavior="scroll" direction="up" width="200"

    Hope this will solve your problem.

  28. Hi – this is an old tut but I'm wondering if you know how to slow down the scroll so it's easier to read the pics? I have the marquee above my posts and under my page names here:
    http://familyliteracyandyou.blogspot.com/

    This tut was extremely easy to follow. Thanks so much. The only thing I had to do differently was remove the / just after the .jpg or .png code. I'm going to add a button or something to my blogs so others can find you and so I can come back! Tina

  29. Hi Divya, I am a blog dummy. I start blogging in July this year (2011). Recently, I got a big trouble. A post (with slideshow) works properly in chrome (13-0) & netscape (7-2) but fails in IE (8-0) & opera (11-5). The side-bar is swapped automatically from RHS to LHS. And, the slideshow is hiddened. URL is attached on below. Could you as kind as possible to help me fixing the bug. Thanks. Francis
    http://hongkongogogo4.blogspot.com/

  30. Any idea why this works in browsers other than IE? I am trying to auto scroll "buttons" (basically photos hosted elsewhere with links to click) I have tried so many codes and am getting so frustrated. I am using blogger. Any advice?

    Thanks!
    Cathy

  31. All of these above sliders are awesome especially the No. 2 image slider is the best for me. Thanks for sharing the image slider. If installed in a post then what will be its code… remains the same or change????

  32. all of ur ideas are great can u plz tell me how can i make vertical auto scrolling banner using embedded banner code and can i reset the height and width of scroll box?

  33. hey friend can you show me how to put a horizontal scrolling widget like in this blog ganool[.]com
    i've been searching everywhere but coulnd't find a thing
    i'd really appreciate your help

Leave a Reply

Your email address will not be published. Required fields are marked *