Thursday, January 6, 2011

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).Add a page element
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.

13 comments:

JisForJinx said...

hey this is super helpful, but my only problem is it comes out as a bulleted list. How can I make it go across the page. I did the first option.

maiaT said...

JisForJinx, you have a layout template, so you have to do the second option.
In case you use the code from my example, note that its width is 950px and yours is 960px.
Also, you are using the default widget page list, so you should read this post too.

Carolyn said...

Thanks for this tutorial, I'm so close to getting the effect I desire, but not quite there. I have added images and links trying to create a navbar, but they are stacking instead of being in a row horizontal. Any suggestions?

maiaT said...

None Carolyn, unless you give me some details:
- what kind of template do you have;
- which of these two methods did you apply;
- if you are not sure of the answer, I need a blog url and I can't take it from an unavailable profile.

Carolyn said...

Thanks, I didn't realize my profile had been made unavailable! It is available now.

http://imacookoo.blogspot.com/

I started out with Minima Lefty Stretch, but have made many tweaks since then.

I applied the "Custom menu for Designer templates" method, and it almost worked perfectly for me, I just can't figure out how to make the images not be stacking, but instead in a horizontal row.

Any help is much appreciated!
Carolyn

maiaT said...

All Minima templates are Layout templates, so you have to apply the second method: Custom menu for layout templates.
Follow the tutorial and probably it will work this time.

If not, let me know and I'll try to fix it, but only tomorrow (my tomorrow); it is 0:40 AM at my clock.

The Sugar Chandelier said...

I tried this and it works great but I'm trying to get another result. Each link being replaced by a graphic that says "home" "contact me" etc. instead of just the plain lettering. Hopefully I'm being clear. Do you know of a way to do this? I've seen it on someone elses blog...and I can't seem to find a tutorial on it anywhere. Maybe I'm looking in the wrong places? Can you help me out with that?

Thanks

Val

maiaT said...

Sugar Chandelier,
To use images in your tabs instead of text, in layout templates, follow the steps bellow:
1. Create your images an upload them to an image host, note their URL.
2. Follow the steps form 2.1.

In the code from step 2 delete everything that refers to text and background images, you can leave background color, like this:

ul#main-menu {margin:0;padding:0;float:left;width:100%;background: #998E53}
ul#main-menu li {margin:0;padding:0;list-style:none;float:left;width:157px;}
ul#main-menu li a {display:block;padding:0;color:#0e0e0e;border-left:1px solid #292822;border-right:0px solid #292822;}
ul#main-menu li a:hover, ul#main-menu li a:focus {background:#ece1cf;border-left:1px solid gray;border-right:1px solid gray;}

- change width, border, padding, according to your images.

At point 2.2. make image links in your html list like this:

<ul id="main-menu">
<li><a href="http://first-page"><img src="http:// image for first tab"></a></li>

- do this for all your tabs with the corresponding image.

Note:
This may not work well in designer templates with your existing page menu styling.

The Sugar Chandelier said...

@maiaT

it worked great! thanks so much for your help, you have no idea how happy you've made me today hah I was wracking my brain for hours yesterday!

life saver! =)

maiaT said...

I'm glad I could help. To make someone happy is the greatest satisfaction.

3punkmom said...

Hi! Is there any way to make the font larger? I don't see a font size...
Thanks

maiaT said...

3punkmom,

For new templates go to Template designer|Advanced|Tabs text and choose a different text size.

If you are using my styling from 2.1. for layout templates:
- Insert the font-size property after font-family, like this:

ul#main-menu {font-family:helvetica,arial,sans-serif;font-size:14px;

Change the 14px as you wish.
Good luck!

Taylor Watchorn said...

this is awesome, thank you so much.

Post a Comment

Thanks for taking the time to comment.
I like to read your thoughts and answer your questions, however comments containing links will be deleted and reported as spam.
Thanks for being understanding.

Search for photos, macro photos or paintings.

Do you want to create a separate archive page for your blog too?
If yes, click the link above to go to the tutorial.