The Shifted Librarian - Shifting Libraries at the speed of byte

How to Add Navigator Links in Radio

Written for Radio 8 using the Transmitter template, although you should be able to adapt it to other templates as well. Send me your comments and suggestions for improving it!



image of nav links
In Transmitter, the nav links are the ones listed on the left-hand side in the gold column. In this example, the first link goes to the home page for my blog.

The second and third links go to "Stories" I've created (in other words, whole pages rather than short posts).

The third and fourth links are standard "mailto" and "aim:goim" links. You can use the source code listed below to modify them to work for your site. Just substitute your own email address and AIM handle.

All of the following links go to external sites. They use standard HTML "http://" href tags, although they are embedded in an XML tag. Again, you can adapt them using the code below.

The trick in Radio is that these links are stored in XML, not HTML, so the code is a little bit different than it normally would be. Instead of just linking to Yahoo by using <a href="http://www.yahoo.com/">Yahoo</a>, you have to use two different identifiers embedded in XML tags, "name" and "pagename".



image of option in prefs

Luckily though, Userland makes it pretty easy to edit these using the Prefs, specifically the Navigator links under the "Weblog" options.

Here is a blow-by-blow of the code behind the nav links shown above. To start, click on Navigator links and you should see something like the image below, albeit with fewer lines.



image of nav links code

If you're familiar with HTML, you'll recognize the general way this works, but don't forget that it's XML, not HTML. If you try to use straight HTML, it won't get processed correctly in your side bar. That's why you need the extra slashes. Also, make sure you don't accidentally erase the <navigator> and </navigator> tags at the top and bottom.

To get the <hr> line to appear between specific items, use
<item name="&lt;hr&gt;" pagename=""/>.

image of a line

To get plain text that isn't a link, use the same code you would for a link, but don't fill in the pagename. Example: <item name="Virtual Jenny:" pagename=""/>  Note that you still need to keep the pagename tag, even though it's empty. Otherwise, it won't display at all.

To add your contact information like I did (an email link and an AOL AIM instant message link), adapt the following code to add your email address, your AIM handle, and whatever subject you want to appear in the AIM message.

<item name="Email Me" pagename="mailto:InfoMaven@TheShiftedLibrarian.com"/>
<item name="AIM Me" pagename="aim:goim?screenname=cybrarygal&message=Hi+Jenny!+Can+you+come+out+and+play?"/>


You can learn more about the Editing the Navigator Links in the Radio documentation itself. It's a pretty good explanation... it's just that the images and examples help visualize what you're actually doing.

Caveat: always test your links from the public side of your site, NOT the Radio desktop home page. You have to get the paths correct when you're linking to pages within your own blog, especially when you're displaying images. I'm finding that Radio is automatically inserting " http://127.0.0.1:5335/ " into the HTML img src tags in my code. That's why you need to test on your public site, because the outside world won't have your image stored at a 127 address on their computers. Therefore, the graphics won't display for them, even though they look just fine to you.

image of font size code

Further down on the Navigator Links page is a box that lets you specify the alignment and size of the text of these links. The default alignment is "left", but you can change it to "center" or "right".

Your default choices are "small" and "realsmall".  Be careful about using realsmall, because I don't think it's a good value if you're at all concerned about accessibility issues. You can embed your own Cascading Style Sheets if you want to specify a different font size, but that's more of a Radio 102 topic.

The last box is explained pretty well on the Navigator Links page itself. Whatever character you specify in that box will become a separator between every link. That's why I do the separation myself in the XML <navigator> box, but your mileage may vary.

Everything you type into this Navigator Links page is processed by the <%navigatorLinks%> macro that appears in your templates (which are also under Prefs). To find it, go to your Home Page Template and scroll down until you see that snippet of code. If you want to move it somewhere else, just copy that one macro, find where you want to put it, and paste it in. This is how you can move them willy-nilly to the right-hand side or even the bottom of the page.

Update: Rogers Cadenhead explains how to add a blank line to your navigator links!