DIY Blogroll

As mentioned on my "proper" blog, I've kicked Blogrolling off the template, replacing it with something DIY homebrew.

I started by copying all the links into MS Word, which "helpfully" added all sorts of MS coding into what it saved as an HTML file. A handy start though and I'd actually recommend it for long blogrolls. There's just a need to cut out all the unnecessary garbage that turn the formatting of the links into something 'orrible.

So how do I make a Blogroll ? Your tool of choice (on a Windows PC) will be the ever useful Notepad. An excellently simple and crude text editor, it will save things exactly as you want them saved, without the MS Crud that Word will add. Probably best if I give the whole block code and then natter about little bits of it :



Additional note - just spotted the vertical line between the Sleepy's Techie Stuff line and the last "br" ... It shouldn't be there ! I took the screenshot of the window at the same time as the cursor was doing the opposite of blinking ... There's nothing there on that line, honest !

I'm no HTML expert and an HTML expert will know exactly what's going on up there ... But this post isn't aimed at those people ! Plus an HTML expert will probably point & snigger at the above and say it looks 'orrible. It works though :-)

Where you see the <>, that's where your web browser has a look at the HTML and turns whatever's inside into links, spaces, pictures, all that fancy web stuff. I'm having to cut all those out below cos otherwise your web browser will turn them into fancy web stuff, hiding what I'm talking about. (Insert "lol" here!) Note that all tags need to be closed, where you see [h2] or [li], there needs to be a [/h2] or [/li] to close it.

(replace [ and ] with <> in your template!)

!-- This is a comment - comments don't appear on the page but adds something that lets you break up an otherwise anarchic mess of Stuff that you won't understand when you come back to it in a year. Comments Are A Good Thing. This one tells me exactly what part of the template belongs to the Links.

"h2 class= ..." This line makes the word "Links" look distinct from the ... ermmm ... links.

br - apart from reinforcing feelings of being cold (the heating went off 5 minutes ago), these act as carriage returns, adding a gap between one line and another. They're scattered around in various places to stop the various Walls Of Text running into each other.

[a href="url"]Something to call your link[/a] - This is your hyperlink ... The href= is the bit that tells your browser where to look for the page it points to. The "Something to call your link" gives it something more meaningful than (e.g.) http://sleepypetestories.blogspot.com. Note the [/a] to close the tag at the end.

[li][/li] - I confess ! I stole these. Dunno what they're supposed to do but they turn the links from a mishmash of continuous text into a nice ordered list. With bullet point thingys at the side.

There's just one link in the piccy above, to add more just copy the [li][a href="url"]text[/a][/li] line and replace the url and the description as required.

So that's how I've sorted my Blogroll out, if you see the above and have trouble applying it then drop me an email at the iceangel.mercs@ address (in the profile) and I'll have a peek. Word of caution there though, I know even less about XML than I do HTML !

PS This post probably destroys my credibility as a clued up Techie Bod. Muahaha - I have my "not caring" face on there :-) I could easily look up what all the HTML tags above mean but as they work (which is what really matters), I'll accept the pointing fingers of the HTML experts.