Neil Turner's Blog

Blogging about technology and randomness since 2002

Creating an accessible blogroll with BlogRolling.com

Today, I finally invested in a premium BlogRolling.com account, at the expense of £12.75 for the next year. Jason has been suggesting that he may have to restrict the free service even more, and with the US dollar strengthening against the pound I thought I’d better jump on the bandwagon.
One great thing about BlogRolling Gold is that you can create proper lists for the links, rather than using line breaks. This improves accessibility as it means you don’t just have a load of white space between links, and it gives you more flexibilty – you can even have them numbered, if you wanted to. If you’re interested in doing this yourself, here’s a nifty guide.


Firstly, you will need a BlogRolling Gold account. Free accounts won’t work properly – trust me, I’ve tried it. Log in, and open the Preferences page for your blogroll, then follow these instructions:

  1. Under ‘Blogroll Container’, select ‘No container’.
  2. You’ll need to disable link blocks, so if you have them, put a 0 in the ‘Link Blocks’ box.
  3. In ‘Link Goodies’, type <li> into the ‘Prepend to link’ box. You may enter stuff after this if you want to jazz your links up. Leave ‘Append to link’ blank unless you want to jazz your links up.
  4. In ‘Optional linebreaks’, set the ‘Optional linebreak value’ to </li>.
  5. Set ‘Credit Link’ to ‘No credit’. We’ll add one manually later.

Save these changes, and then log into your content management system (or whatever you use to update the page that has your blogroll). Now, you need to make the following changes:

  1. Find the BlogRolling code, and before it, type in one of the following:
    • <ul> if you want a bulleted list (or just a normal list like you had before)
    • <ol> if you want a numeric list with numbers beside each link
    • <nl> if you are using the new Navigation List tags from XHTML 2.0.
  2. After the code, type the corresponding closing tag. So if you typed <ul> previously, then you need to type </ul> here. If you used <ol>, you’ll need to end it with </ol> and so on.
  3. If you want a credit link (and I’m sure Jason would want you to), you should now add <p>Powered by <a href="http://www.blogrolling.com/">BlogRolling</a></p>. You can mess around with that, if you like.

And we’re done! What’s more, the code should validate fine. You’ll need to do this for each blogroll you have, although if you only want one credit link then you only need to do the last step once.
Just a couple of things to note:

  1. If you want to hide the bullets, you’ll need to add some CSS. Put this in your stylesheet: li, ul{list-style:none;margin:0;padding:0} Fiddle with the values as you please to get the desired effect. For more, see Taming Lists from A List Apart, which has a good guide to customising lists of links using CSS.
  2. If you want your list to validate, you’ll need to dump the target="_blank" attributes (which means setting the targets on all links to default). Target was dropped from the XHTML spec, probably because it’s quite annoying, and it’s hard to open a new window when using a text browser or a mobile phone, for example. Let the user choose whether they want a new window open, don’t inflict it on them.

If you have any questions or problems, post in the comments and I’ll see what I can do.

3 Comments

  1. Congratulations Neil – if you don’t know why, check out the Blogrolling News page!

  2. Yes, I noticed that earlier today…

  3. A new possibility…

    …to be blogrolled. Over at Neil’s World, he takes on a subject dear to my heart: the RIAA. Read and be amused. He also has info re: Blogrolling (perhaps I should move up to Gold)….