Apr 5, 2013

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.