u75 » blogs » link to the list

main page | about | getting on the list | linking | remote help | launch remote | yahoo group | mail me | home

Use any of the following in your blog HTML to advertise the list, or make your own.

Click on the text box to select the entire code, and press CTRL-C (or Apple-C or whatever your copy shortcut is). Then paste as appropriate.

Remote control

(15 March 2005) Okay, I think this is quite cool - this link opens up a little window that you can use to navigate around the blog list, whether or not people have a link on their page.

The ring code, below, has been updated to include a remote launcher, so if you already have ring code then you can just change your existing code to the new version and won't need to use the following.

<img src="http://www.fridgemagnet.org.uk/urban75/blogs/u75-remote.png" alt="Urban75 Bloglist Remote" onclick="javascript:window.open('http://www.fridgemagnet.org.uk/urban75/blogs/remote.php', 'u75remote', 'toolbar=0,location=0,directories=0,statusbar=0,resizable=1,menubar=0,titlebar=0,width=150,height=150'); return false;" style="cursor: pointer;" title="launch bloglist remote" />

<input type="button" value="U75 Bloglist Remote" onclick="javascript:window.open('http://www.fridgemagnet.org.uk/urban75/blogs/remote.php', 'u75remote', 'toolbar=0,location=0,directories=0,statusbar=0,resizable=1,menubar=0,titlebar=0,width=150,height=150'); return false;" title="launch bloglist remote" />

<a href="http://www.fridgemagnet.org.uk/urban75/blogs/remote_help.php" onclick="javascript:window.open('http://www.fridgemagnet.org.uk/urban75/blogs/remote.php', 'u75remote', 'toolbar=0,location=0,directories=0,statusbar=0,resizable=1,menubar=0,titlebar=0,width=150,height=150'); return false;" title="launch bloglist remote">U75 Bloglist Remote</a>

U75 Bloglist Remote

Livejournal and the remote

Please note that the remote launcher links won't work if you post them on Livejournal. Livejournal disables Javascript in posts and so on. You can remove them from the code given for the rings below by clicking the "remove code" button.

Full blogring-style code

This fancy code will give visitors to the site the ability to navigate around the whole blog list. « and » will take them to the previous and next blogs on the list, ? will take them to a random one, and ^ will launch the remote (see above).

Unstyled

<a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=prev" title="previous blog">&laquo;</a>&nbsp;<a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=random">?</a>&nbsp;<a href="http://www.fridgemagnet.org.uk/urban75/blogs/">U75&nbsp;Blogs</a>&nbsp;<a href="http://www.fridgemagnet.org.uk/urban75/blogs/remote_help.php" onclick="javascript:window.open('http://www.fridgemagnet.org.uk/urban75/blogs/remote.php', 'u75remote', 'toolbar=0,location=0,directories=0,statusbar=0,resizable=1,menubar=0,titlebar=0,width=150,height=150'); return false;" title="launch bloglist remote">^</a>&nbsp;<a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=next">&raquo;</a>

« ? U75 Blogs ^ » or

Full styling

Note that you must paste this as a block - don't put in any extra spaces.

<span style="font-family: Verdana, sans-serif; font-size: 10px;"><a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=prev" style="background: #f60; padding: 1px 3px 1px 3px; color: #fff; text-decoration: none; border-right: 1px solid #fff;" title="previous blog">&laquo;</a><a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=random" style="background: #f60; padding: 1px 3px 1px 3px; color: #fff; text-decoration: none; border-right: 1px solid #fff;" title="next blog">?</a><a href="http://www.fridgemagnet.org.uk/urban75/blogs/" style="background: #000; padding: 1px 3px 1px 3px; color: #fff; text-decoration: none; border-right: 1px solid #fff; font-weight: bold;" title="full list">U75Blogs</a><a href="http://www.fridgemagnet.org.uk/urban75/blogs/remote_help.php" onclick="javascript:window.open('http://www.fridgemagnet.org.uk/urban75/blogs/remote.php', 'u75remote', 'toolbar=0,location=0,directories=0,statusbar=0,resizable=1,menubar=0,titlebar=0,width=150,height=150'); return false;" style="background: #f60; padding: 1px 3px 1px 3px; color: #fff; text-decoration: none; border-right: 1px solid #fff;" title="launch bloglist remote">^</a><a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=next" style="background: #f60; padding: 1px 3px 1px 3px; color: #fff; text-decoration: none;">&raquo;</a></span>

«?U75Blogs^» or

Linking from pages other than your blog

The previous and next links rely on someone clicking on them from a site with a URL that's in the blog list.

If you want to include the links on a page that's not in the list, simply add &id=id after the action=... part of the link. For instance, to link to the previous blog in the list from this page, I would use <a href="http://www.fridgemagnet.org.uk/urban75/blogs/?action=prev&id=0">.

Your id is just your position in the blog list, counting upwards from 0, so mine is 0.

Straight link

The easiest option.

<a href="http://www.fridgemagnet.org.uk/urban75/blogs/" title="Urban75 Bloglist"><img src="http://www.fridgemagnet.org.uk/urban75/blogs/u75_bloglist.png" alt="Urban75 Bloglist" style="width: 80px; height: 15px; border: none;" /></a>

Making your own links

The URLs you'll want are:

Don't forget the point about using id=, above.