Transforming a Blogger RSS feed into a slideshow

This tip was created by us to solve a challenge that one of our readers left for us on our Resizing your thumbnails in Blogger's Popular Posts widget post. Initially we decided to make take this challenge and transform Blogger's Popular Posts widget into a slideshow, but now we're going to show you how to transform ANY Blogger RSS feed into a slideshow and place it into a widget, or anywhere in your blog for that matter.

Here's the script. (example in the bottom right corner)

This script has a few things you'll need to do to make it work:

  1. Add a HTML widget to your site; in that widget create a HTML ul object like so: <ul></ul> and hit save
  2. You'll need to know the ID of the HTML object that you've added; you can figure this out by using Chrome's identify functionality or by looking in your Template's HTML code
  3. In our code we've used the HTML2 object, but you'll need to find/replace all instances of it in your code with the object you identified in #2
  4. In the code we had to set a width for the element; in our case 235px. You will want to change this value everywhere it is found to be the correct size for your own layout.
  5. Set your feedURL, number of entries, blurb length, etc. in the variable definitions in the script


All colors and other attributes are customizable using CSS.

Enjoy!



    Comments

    1. Just saw the example and it looks stunning! Exactly what I had been looking for! Will come back with more comments once I'm done implementing it on my site. Thanks, Dave :)

      ReplyDelete
    2. Sorry for being such a persistent pain, Dave but it seems I am doing something wrong here? I tried the code with the correct HTML ID and everything but it wouldn't show anything! :(


      It does show a box corresponding to the HTML widget but the box appears empty. Perhaps it's not able to extract the images from my feed URL? Not sure what the problem might be. I have checked and rechecked my feed URL and HTML ID but no success...

      ReplyDelete
    3. what's your site's URL?

      ReplyDelete
    4. Here you go: http://www.alwaysspanish.com/

      ReplyDelete
    5. I need you to put the code in...? As well as the widget that you want it to go into.

      ReplyDelete
    6. The title of this widget is "Random Articles"

      ReplyDelete
    7. Ok. Remove the script information and CSS from the widget. It can't be in there. That needs to go before . The only contents in your widget should be

      ReplyDelete
    8. Really! Then where do the scripts go? I am guessing, before the ?

      ReplyDelete
    9. All scripts and CSS need to go into your Template before /head

      ReplyDelete
    10. Did that but still the same result :(


      Now the widget has just the code and everything else is right above the tag. Sigh...am sure I must be doing something extremely stupid...just can't put my finger on it!

      ReplyDelete
    11. Add: google.load("feeds","1");


      Right before $(document).ready(function(){

      ReplyDelete
    12. You know what, this actually worked...sort of. Well, the slideshow is now on but I can see only the overlay text but no image. Is it just my browser or do you also see this problem when you open my site?


      Regardless, I am starting to feel embarrassed about eating up so much of your time as a shameless freeloader! Would be glad to make it up to you if I could in any way.

      ReplyDelete
    13. You're RSS feed, you can't use the FeedBurner version, you need to use the original Blogger URL. In your case http://www.alwaysspanish.com/feeds/posts/default

      ReplyDelete
    14. You can also tip your waiter --->

      ReplyDelete
    15. Did that...the pics still refuse to show up :(

      ReplyDelete
    16. Working like a charm now...you just made my day!!! Now I can focus on customizing its cosmetics :)

      ReplyDelete
    17. I will soon be hitting your tip jar for this ;)

      ReplyDelete
    18. Ok! It's works. But the feed I use has no images. Is there an option to not display images? (the place of image is empty).

      http://blogtricker.blogspot.com

      ReplyDelete
    19. Just to clarify: you want to use a slideshow script for a RSS feed that has no images?

      ReplyDelete
    20. Perfect!, it works great!. I added a specific label feed (http://support.google.com/blogger/bin/answer.py?hl=en&answer=53336) instead of just the latest feeds.
      I just have one question... is it possible to randomize the order of the show? Im showing sponsors of a website and it shows always the most recent sponsor, Im afraid the sponsor that join in at the beginning will start complaining as they dont show up until all the other have appeared.
      Thanks.

      ReplyDelete
    21. Jerhwin HernandezJune 8, 2013 at 9:26 AM

      Hi,Can we have this widget multiple on a blog(by label feeds), I have tried to do it, but all of the widget displays the same label,even I changed every label feed address. is there a trick to fix it? Thanks

      ReplyDelete
    22. Yes, you can, but not the way it is written. In order to have multiple slideshows on the same page you need to change this javascript to be a function call, then set parameters (such as feed url and destination div). To see an example read this page: http://www.blogxpertise.com/2012/09/custom-slideshow-widget-using-picasa.html

      ReplyDelete
    23. Hi Sir,Thank you for responding, I took a look about the examples but I'm sorry I can't figure out myself what codes I need to add or change? can you please indicate it here? Thanks

      ReplyDelete
    24. This is wonderful and just what I was looking for, except that I'm not sure how to use the slideshow anywhere but inside the widget. Is it possible to display this script on a static page?

      ReplyDelete

    Post a Comment