Add external links to your page list or create a custom menu

This tutorial explains how to add external links (non pages links) to the page list menu.
Using the new Blogger interface, we have now the possibility to add external links to our page list menu, keeping the styling of our current template.
At the time I wrote this tutorial this was not possible with the default page list widget, so I updated this tutorial to reflect the new possibilities.
Let's see how to do this:

1. Add external links to your page list, as styled by your current template

To accomplish this you have to use the new Blogger interface.

Step 1. From your dashboard select the blog you want to work with, click on the dropdown menu at the right and select pages, as shown in the picture.

Step 2. From the new page that opens, click the dropdown menu near New page and select the second option (Web Address).
Follow the required steps and you are done here.

If you still want to create a custom menu for your Blogger blog, read bellow how to do it, for both, new designer templates and older, layout templates in the second part.

2. Custom menu for new, Designer templates

Update: when I wrote this tutorial, it was not possible to add external links to the default menu (Pages) list. If you still want to add a simple list of links instead of the pages widget, please read along.
There is a very easy way to create a custom menu for designer templates, without even opening the template. You can add whatever links you prefer to the new menu and you can change or delete it when you please, with one click. Here we go:

Step 1. Create a simple unordered list with all your links you want to show in the menu, like this:

<ul>
<li><a href="http://first-page">Home</a></li>
<li><a href="http://second-page">About</a></li>
<li><a href="http://third-page">Archive</a></li>
<li><a href="http://fourth-page">Gallery</a></li>
</ul>

Save this list in a text editor (Notepad), for later use.

Step 2. Replace the pages list with your new list
Important! If you already have the page list widget installed, hide it. To do this just go to Dashboard/Pages and from the dropdown menu at the right, select don't show (as in the picture).
Step 3. For a horizontal menu under your header go to Dashboard/Layout and add a page element to the crosscol section of your template, marked with the red oval in the image. Choose a HTML/JavaScript widget from the list .
There will be no other widgets in this section, now that the default menu is hidden, but it's styling is still in the template and we will make use of it.
Step 4. Copy and paste into the widget box the linklist you've saved in step 1.
Step 5.Save the widget and preview. Check if the widget is in the right place (the red oval in the image), if not, drag it to the crosscol section (under header). You should see now your new menu, with all your links, and the styling of the old pages list.
That's it, if you like the look of your menu, we are done.

Demo

In case the new menu doesn't show up , either you forgot to remove the default Pagelist widget or you have to make some small changes in your template. (see bellow, at 4)
For further customization and styling of the tabs background or tabs text color click the link.

3. Custom menu for older, Layout templates

The difference between the two templates is that layout templates don't have styling for the Pagelist menu background or tabs.
Layout templates are relatively old templates and there tons of tutorials on the web about creating a custom menu, still I wanted to include this one too, here.

Creating a custom menu you can add to it all the link you want to show in the menu, non-pages links too.
As an example, we'll use the styling of the menu you see on this blog (width: 950px); it is not very fancy but if you are more patient than I am, you can change it.

3.1. CSS styling of new menu
Step 1. Give your menu a unique ID, like #main-menu, you can name it however you want.
Step 2. Go to Dashboard/Template/Edit Html and find this code ]]></b:skin>

/* Start main-menu http://colormagicphotography.com
----------------------------------------------- */
ul#main-nav {font-family: helvetica,arial,sans-serif; margin: 0; padding: 0.3em 0; float:left; width:100%; font-size:0.9em; background: #82330F; border-top:#AD4314;} ul#main-nav li {margin: 0; padding: 5px 0 0; list-style:none; float:left;} ul#main-nav li a {text-decoration: none; font-weight: bold; padding:0 2em; color: #F6F7F9; }

- You can change any value in this code to your liking.
- Copy the code first into a text editor (Notepad), if you think you need more time to make your changes.
Step 3. After making all the changes copy you customized CSS code from the text editor and paste it in your template, right above ]]></b:skin>.
Step 4. Save your template; at this moment you can't see the changes, you still need the link list.

3.2. Create your Html list for the new menu

Repeat steps 1-5, the same way as for designer templates, described in the first part of this tutorial, with a small change:
-insert the line in green in your Html list code at step 1., like this:

<ul id="main-menu">
<li><a href="http://first-page">Home</a></li>
<li><a href="http://second-page">About</a></li>
<li><a href="http://third-page">Archive</a></li>
<li><a href="http://fourth-page">Gallery</a></li>
</ul>

- before you save the widget, make sure you've deleted the default pagelist widget (as in step 2. for designer templates) , otherwise you will end up with two menus.
- Save the widget and see your new menu.

- There are also many online menu generator, just google for them.
For customizing the default pages menu read this post.

4. Problems you may encounter:

a). You can't see the Add a gadget (marked with red) in the crosscol section (under header);
In this case,

1. Go to the Layout | Edit HTML tab for your blog
2. Backup of your template (Export blog)
3. Check the box to Expand Widget Templates
4. Look for the following lines of HTML code:

- in designer templates:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='no'>

- replace the "no"in red with yes, like this:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

- in layout templates:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

- replace the "no"in red with yes.

b). Another problem is when you don't have the crosscol section, in some custom templates;
If you don't have one of the above codes in your template, you have to insert it, usually after <div id='content-wrapper'>, or where you want the tabs to show up.

Which one to insert? That depends on your template.