How To: Create a Rotating Blogroll

Warning: Really geeky stuff ahead.

Thanks to Pete for the nudge to put up the code for the rotating blogroll.  What's that?  Look at the top of the middle column (as of this writing) of my blog, you'll see a section called "Blogroll (rotating)".  If you refresh the page the names will magically change.  Go ahead and try it, it's true.

I've had a lot of people ask me how to do this, so this is a quick and easy tutorial.  This is just javascript, so it should work with just about any blogging platform.  I found some code online and then tweaked it for my purposes, I think you'll like it. I think I have written the code so that it's easy enough to use, you only have to change a couple of things.  If you have questions, put them in the comments section because other people probably have the same questions, I'll answer them if I can.

First of all, let me answer a question you may be wondering:  why would you want to have a rotating blogroll in the first place?  Simply answered, I have so many people that I want to link to, the list would be really long and thus really ineffective I think.  I don't want to clutter my page with 100 blog links, and I think people are more likely to click on something in a short list rather than a long list.  So, let's get right into it:

Here is the code

<script type="text/javascript" charset="utf-8">

/* list all blogs, put a \ before single quotes */
var church_blogs = [
'<a href="http://www.mattsingley.com">Matt Singley</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.someblog.com">Blog Link</a>',
'<a href="http://www.thelastbloglink.com">Last Blog Link</a>'

];

function randomize (a_items, n_count) {
    var n_index, s_html = '<ul>';
    while (a_items.length && n_count) {
        n_index = Math.ceil(Math.random() * a_items.length) - 1;
        s_html += '<li>' + a_items[n_index] + '</li>';
        a_items[n_index] = a_items[a_items.length - 1];
        a_items.length = a_items.length - 1;
        n_count--;
    }
    return s_html + '</ul>';
}

// call randomizer
// 1st variable - list of blogs in the form of a variable. I named my variable church_blogs
// 2nd variable- number of blogs to display. Currently set at 5, change to however many you want
document.write(randomize (church_blogs, 5));

</script>

You can copy and paste that into a text document, then modify it as necessary.  You can also click here and download this snazzy little code snippy in a pre-existing text file.  Here is what you will need to modify...

First, make sure you keep my name on the top of the list.  The code won't work without it. ;) Plus, order doesn't matter, these names will be listed randomly.  See all of the links below mine that have a URL and a name?  Simply change them to the information that you want to link to.  For example, if you want to like to Amazon, in the first part of the line you will want to have between the quotes http://www.amazon.com and then between the > and < you will put a friendly name, in this case just type Amazon. 

Easy, isn't it?  Now do it on each line for the rest of your links.  There is something very important to note here:  there is a comma at the end of each line EXCEPT the final link.  If you don't follow that rule then your code will NOT work, so don't forget.

Second thing you need to do is change your variable randomizer.  Huh?  It's easy, it's the second to the last line, and it has a number.  Right after "church_blogs" there is the number 5.  So in this case, five random links from above will be displayed on the page.  If you change that number to 3, then only 3 links will appear.  If you change it to 25, then 25 will appear.  Do whatever you want, but I went with 5 because I have this code on my page three times, so a total of 15 links appear, which is plenty per page load.  I did that in TypePad by creating one typelist (Notes), but three different "items".  Then I put the code into each of the items, as pictured to the left.

That's it!  Easy, isn't it?  Now go out and build rotating blog posts. If you are successful, drop a comment so we can all go check it out.