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 t
ransform 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:
- Add a HTML widget to your site; in that widget create a HTML ul object like so: <ul></ul> and hit save
- 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
- 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
- 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.
- 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!
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 :)
ReplyDeleteSorry 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! :(
ReplyDeleteIt 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...
what's your site's URL?
ReplyDeleteHere you go: http://www.alwaysspanish.com/
ReplyDeleteI need you to put the code in...? As well as the widget that you want it to go into.
ReplyDeleteThe title of this widget is "Random Articles"
ReplyDeleteOk. 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
ReplyDeleteReally! Then where do the scripts go? I am guessing, before the ?
ReplyDeleteAll scripts and CSS need to go into your Template before /head
ReplyDeleteDid that but still the same result :(
ReplyDeleteNow 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!
Add: google.load("feeds","1");
ReplyDeleteRight before $(document).ready(function(){
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?
ReplyDeleteRegardless, 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.
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
ReplyDeleteYou can also tip your waiter --->
ReplyDeleteDid that...the pics still refuse to show up :(
ReplyDeleteI sure will :)
ReplyDeleteWorking like a charm now...you just made my day!!! Now I can focus on customizing its cosmetics :)
ReplyDeleteI will soon be hitting your tip jar for this ;)
ReplyDeleteAwesome!
ReplyDeleteOk! 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).
ReplyDeletehttp://blogtricker.blogspot.com
Just to clarify: you want to use a slideshow script for a RSS feed that has no images?
ReplyDeletePerfect!, 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.
ReplyDeleteI 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.
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
ReplyDeleteYes, 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
ReplyDeleteHi 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
ReplyDeleteThis 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