iamcal.com - publish

Blog Hacks : Using a dropdown for your blogroll

Originally published 20th June 2003

Linking to other weblogs is a way of showing you read them and like them. When you read quite a few, your "blogroll" can become quite big and start to take up alot of space. A quick hack to save space is to change your blogroll from a list of links, into a dropdown. This only works for javascript enabled browsers, so if you're worried about accessability, then there's a suggested fix afterwards, for the non-javascript crowd.

Your current blogroll probably looks something like this:

	<a href="http://iamcal.com/">iamcal</a><br />
	<a href="http://plasticbag.org/">plasticbag</a><br />
	<a href="http://kottke.org/">kottke</a><br />

You'll need to convert each link into an <option> tag within a single <select> tag:

	<select>
		<option>Choose a weblog...</option>
		<option value="http://iamcal.com/">iamcal</option>
		<option value="http://plasticbag.org/">plasticbag</option>
		<option value="http://kottke.org/">kottke</option>
	</select>

Then, using the onchange event of the <select> tag you can tell the browser to launch the selected site:

	<select onchange="window.open(this.options[this.selectedIndex].value);
		this.selectedIndex=0;">

To enable this to work on all browsers, you'll also need to wrap the whole thing in a <form> tag:

	<form onsubmit="return false;">
		<select onchange="window.open(this.options[this.selectedIndex].value);
			this.selectedIndex=0;">
			<option>Choose a weblog...</option>
			<option value="http://iamcal.com/">iamcal</option>
			<option value="http://plasticbag.org/">plasticbag</option>
			<option value="http://kottke.org/">kottke</option>
		</select>
	</form>

So there you have it - your blogroll reduced into a single small dropdown.

But what if you want it to work without javascript enabled? Well, it will require a little bit more work. In this example we'll be using PHP, but you can use any serverside language.

The first thing to do is to enable the form as a normal html form, pointing to a php script:

	<form action="blogroll.php" method="get" target="_blank">
		<select onchange="window.open(this.options[this.selectedIndex].value);
			this.selectedIndex=0;" name="link">
			<option>Choose a weblog...</option>
			<option value="http://iamcal.com/">iamcal</option>
			<option value="http://plasticbag.org/">plasticbag</option>
			<option value="http://kottke.org/">kottke</option>
		</select>
		<input type="submit" value="Go" />
	</form>

Now, when javascript is not enabled, the user can select a blog, then click the submit button (labeled 'go'). This, in turn, will cause a new window to open, with the address blogroll.php?link=http://iamcal.com/

By creating a simple script called blogroll.php, you can get php to forward the user to the URL passed in the link parameter:

	<?php
		header('location: '.$HTTP_GET_VARS['link']);
		exit;
	?>

If you don't have a serverside language installed, but are using Apache with mod_rewrite, then you can do the following instead, inside your .htaccess file:

	RewriteEngine on
	RewriteCond	%{QUERY_STRING}		^link=(.*)$	[NC]
	RewriteRule	blogroll\.php		%1		[R=permanent]

These rewriting rules act exactly as the blogroll.php script does - they take a url of the form blogroll.php?link=http://iamcal.com/ and convert it to http://iamcal.com/.