Style static pages menu list-customize pagelist navigation in Blogger

This tutorial is about styling the pagelist for Blogger static pages, customizing the navigation list on layout templates!
For styling the Pageslist on new, Designer templates, read this post.
If you are not sure what template type your blog is using check your template type first.

The styling of the original pagelist is in an external style sheet, and we can't modify it.
Instead we can create a new style for this PageList navigation, inserting new code to the CSS of our template.
If you are new to static pages, you should read first this post about Different ways to display static pages list.

Styling PageList navigation for Blogger static pages.

At this point I assume that you already have your static pages created and the list widget too. Now all we have to do is to restyle the widget to look more like a menu.
Decide how do you want to display the pagelist: vertically, in the sidebar or horizontally, under the header? Now you can still drag it where you want it, but not after we style the list.

There are endless way to do this. Here are some basic lists for navigation, two vertical and two horizontal models. Choose one of them and let's start styling!

- First of all back up your template!
- Go to Layout >> Edit HTML.
- Find this piece of code: ]]></b:skin> and right above this code insert one of the following codes, just one.

1. Vertical menu in the sidebar:

CSS CODE for menu 1

.PageList UL {margin: 0;padding: 0;list-style-type: none;width: 9em;}.PageList LI {width: 12em;margin: 0 0 .2em 0;background-color: #292822;}.PageList A {display: block;color: #FFFFFF;padding: .2em .8em;text-decoration: none;}.PageList A:hover {background-color: #935E5E;color: yellow;}

This is the dark green one. See the screenshot.

Next is the Maroon, with some borders:
CSS CODE for menu 2

.PageList UL {list-style: none;margin: 0;padding: 0;}.PageList LI {width: 12em;background-color: #471818;border-top: solid 1px #471818;border-bottom: 1px solid #778899;border-right: 1px solid #778899;text-align: left;  margin: 0;}.PageList A{display: block;text-decoration: none;padding: .2em .8em;}a:hover, a:active { color: #000000; }a:hover { background-color: #935E5E; }

These two menus will always be vertical, you can't move them any more under the header in horizontal position, unless we transform it in a horizontal menu bar.

2. Horizontal navigation list:

CSS CODE for menu 3

.crosscol .PageList UL {list-style-type:none;margin:0;padding:0;overflow:hidden;float: left;text-align: center;border-top: 1px solid #998766;border-bottom: 1px solid #998766;}.crosscol .PageList LI {display: inline;padding: 0.5em;margin: 0em;background-color: #471818;border-right: 1px solid #998766;}.crosscol .PageList A{float: left;font-weight:bold;color:#FFFFFF;text-decoration:none;}.crosscol .PageList A:hover{background-color:#935E5E;color: yellow;}

In the third navigation lists the tabs are uneven. You can use longer words to link to your pages but the uneven tabs don't look so good. See another working example of uneven tabs here.

CSS CODE for menu 4

.crosscol .PageList UL {list-style-type:none;margin:0;padding:0;overflow:hidden;}.crosscol .PageList LI {float: left;padding: 0.5em;margin: 0em;background-color: #471818;border-right: 1px solid #998766;}.crosscol .PageList A {display:block;width: 120px;font-weight:bold;color: #ffffff;text-align:center;text-decoration:none;}.crosscol .PageList A:hover {background-color: #935E5E;color: #FFD700;}

To make the tabs of even width we display the link as block and give it a width. Change the width of the link (marked with blue in the code) in accordance to the number of tabs and the width of the crosscol section.
Reorder the links in the list by editing the widget, if needed.
You can change all colors to your preference by changing the color code. Here is a link to HTML color values and codes supported by all browsers.

These are the basics about styling the existing menu (PageList) in Blogger, but you can make them very fancy just by playing with the colors, borders and list width (in blue).

With the new Blogger interface, now we have the option to add external links to this menu as well, not just those of static pages.
Also, we have the option not to display the default widget but create a new, custom navigation and include all the links here.

Please, let me know if there is something wrong with the code.

Your best teacher is your last mistake.

~Ralph Nader~

Related posts:

Style pagelist menu add custom css-designer templates Blogger
Add external links to your page list or create a custom menu
Create static pages - new feature in Blogger
Different ways to display static pages
Difference between static pages and post pages.
Managing static pages in Blogger blogs
Customize - style static pages, hide sidebar in Blogger
Hide the sidebar on designer templates-static pages Blogger