Creating A Random Blogroll Widget In Blogger

I was talking with Sarah a while back about Better Blogroll and she asked whether I knew of a similar widget for Blogspot users that would show a random subset of links from a Blogspot blogroll. Today, I finally spent a little time putting something together that would work within Blogspot’s unique framework. While I didn’t come up with anything that has as many options as Better Blogroll, I did manage to come up with a hack that will allow Blogger users to display a random subset of links from the Blogger Links Widget.

This is a hack, so you’re going to have to get a little dirty to make it work. In the end, you’ll have a random blogroll, but the widget will ignore the “number of items to show” and “sort” options in the widget because those will be controlled from within the new code.

If you’re interested in creating a random links list on your own Blogger/Blogspot blog, read on for the complete instructions.

How To Show Random Links On Your Blogspot Blog

Go to the Layout Tab and click Add Page Element.
Find Links List and click Add To Blog.
Type in a title and click Save Changes.
Go to the top of the Layout page and click Edit HTML
Click Download Full Template, so that if you mess this up, you’ll have a backup of your template.
Put a check in the checkbox that reads Expand Widget Templates.
Search for the line in the template that contains the title you input. It should look something like this:

<b:widget id='LinkList1' locked='false' title='MyListTitle' type='LinkList'>

This is the start of the widget you created. Don’t touch this line, but delete all the lines below it until you reach </b:widget>. This is the end of the link list widget. Now you have an empty links widget. Your code should look something like this:

<b:widget id='LinkList1' locked='false' title='MyListTitle' type='LinkList'>

<--NEW CODE WILL GO HERE-->

</b:widget>

What you’ve done is gutted the Links widget, and now you’re going to fill the space with the new random blogroll guts. Take the following code and insert it into the section above that reads “NEW CODE WILL GO HERE”. Please don’t make me tell you that “<--NEW CODE WILL GO HERE-->” should NOT be in your code. You knew that already.

<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<script type='text/javascript'>
var maxlinks = 10;
var linksarray = new Array();
var linksarray2 = new Array();
<b:loop values='data:links' var='link'>
linksarray.push("<a expr:href='data:link.target'><data:link.name/></a>");
</b:loop>
if (maxlinks>linksarray.length){maxlinks=linksarray.length;}
for (var i=1;i<=maxlinks;i++)
{
linknum = Math.floor(Math.random()*linksarray.length);
linksarray2.push(linksarray[linknum]);
linksarray.splice(linknum,1);
}
for (x in linksarray2.sort())
{
document.write('<li>'+ linksarray2[x] + '</li>');
}
</script>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Well, Dr. Frankenblogger, you’re almost there. The widget defaults to 10 random links. If you want to change that, change the number on this line: var maxlinks = 10; to the number of links that you’d prefer.
Click Save Template.
Click on the Layout Tab.
Click Edit on the Links Widget and add some links to your blogroll. *dyers

SEOLink