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>

    View Comment
  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 ?

    View Comment
  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. 🙂

    View Comment
  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

    View Comment
  5. 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

    View Comment
  6. 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

    View Comment
  7. 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

    View Comment
  8. 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.

    View Comment
  9. 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

    View Comment
  10. 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?

    View Comment
  11. 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)

    View Comment
  12. 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

    View Comment
  13. 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…!!

    View Comment
  14. Marquee is the most simple way of displaying scrolling images. That blog is actually using some javascript+css to display those images in that widget. I do not have the code for the exact widget, but you may have look on these widgets:
    https://bloggerstop.net/2009/04/create-image-slideshow-part-1.html
    https://bloggerstop.net/2009/04/create-image-slideshow-part-2.html
    https://bloggerstop.net/2009/04/create-image-slideshow-part-2_19.html

    View Comment
  15. 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 🙂

    View Comment
  16. 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.

    View Comment
  17. 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!

    View Comment
  18. 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.

    View Comment
  19. 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 🙂

    View Comment
  20. 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.

    View Comment
  21. 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?

    View Comment
  22. @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.

    View Comment
  23. 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

    View Comment
  24. 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/

    View Comment
  25. 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

    View Comment
  26. 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????

    View Comment

Leave a Reply

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