One of the beauties of blogging is not having to know any ‘backend’ stuff like code. But sometimes it’s good to know a little, because it gives you the means to customise some aspects of your blog.

I thought I would show you how to make a custom menu to go in the widget area of your blog. You can do this in WordPress (self-hosted OR hosted versions) or Blogger. Probably other platforms too, it depends on whether you have the TEXT widget option.

When might you want a custom menu?  A menu is really just a list of links: it’s usually associated with your site’s navigation – home, contact, about us etc. But it could be a list of your most important blog posts (the ones you want people to see), a list of your books with links to buy them, a list of forthcoming events or readings. Some blog themes only offer you one menu in one location. Others offer custom menu widgets, but they’re not always straightforward to set up. With a bit of HTML knowledge you can create as many custom menus as you wish, and include images as well as links.

If you look at the widgets area of your dashboard (or gadgets as they’re called in Blogger) you’ll see an array of options. Scroll through and find the one called TEXT (arbitrary text or HTML) and add or drag this to the position you want it.

When your widget’s in place, click on the down arrow on the right to customise it.

Here’s an example. I recently changed the theme on my Poetgal blog, and realised that the main menu is hidden when the screen width go below a certain size. That’s OK on phones because you usually have to touch a menu icon in the corner to see the whole menu. But on a desktop computer you expect to see the menu. I was concerned that several key pages – ‘About’, ‘Books’ and ‘Poetry readings’ – were going to be overlooked. So I needed a custom menu in the sidebar. So I positioned my text widget in the side bar and called it ‘May be of interest’:

My custom menu is going to be a list of 3 links. In HTML, links look like this:

<a href=”URL of about page”>This is a link to ‘About'</a>

Every part of this this syntax is important – the space between the a and the href, the fact that there is no space between the = and the first “, and no space between the the angled brackets and what’s inside them. Notice also the closing tag </a> – this is where the link text ends. Between the opening and closing tags is the text that will be visible as a link. But we haven’t yet put in a valid URL (web page address).

If I wanted to reference the ‘About’ page on Poetgal, from here, I would paste in the full address including the ‘http’ bit. This goes inside the quote marks, like this:

<a href=”https://ukpoetgal.wordpress.com/about/”>This is a link to ‘About'</a>

Which then displays as:

This is a link to ‘About’

So, going back to my custom menu text widget, all I need to do is find the correct URLs of the pages I want to link to, and paste them using the syntax you see above. Just type the code out once and  copy and paste as many times as you want links, then paste in the correct links between the quote marks.

I tend to leave a line space between each link, just so it’s easy for me to see how many I’ve got. But as long as you start each link on a new line, If you then tick the ‘automatically add paragraphs’ box then your links will display with a line space between each one.

Don’t forget to hit ‘save’ – and your widget is up!

 

Notice that you haven’t had to worry about how the links look – they are automatically ‘styled’ like the rest of the blog. That’s because the styles (font, colours, sizes, spacing etc) is controlled from another file called a ‘Stylesheet’.

Even if you’re not using WordPress, HTML is a universal language. I’ve been typing <a href=”…”>linktext</a> since 1998 and it still works. Hooray!

It’s just as easy to add images and other stuff in a custom widget. In some circumstances it’s also possible to customise the Stylesheet. More about that in a later post.