Thursday, March 25, 2010

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:

6 comments:

leavesnbloom said...

I'm going to be using the "no widget" when I get all the static pages organised. I was abusy little bee behind the scenes last week getting my styling sorted and its now complete - remember I asked you about it a few weeks ago - well I've finally got the pages looking the way I wanted - now I need to finish adding the content and getting my own navigation sorted.

Lyn said...

hello & thank you for posting this!this was exactly what i needed :)

this hack is incredibly useful..but unfortunately when i tried and modified the code on my blog,it looks ok on google chrome&mozilla firefox..

but the same cannot be said with internet explorer 7..instead of being in a row,it drops down like a bullet list

i used the code for style number 3..do you have any idea how to fix this problem?

i hope you can help me..many thanks in advance if you can find the time to help me solve my little problem! :)

maiaT said...

Lyn, please try again, copy the whole code!
In my IE7 it looks OK.
- list-style-type:none; means "no bullets".
I can't help you more as long as you are anonymous.

x said...

Hello!

I just wanted to say thank you to the editors of this blog for this incerdibly helpful post!
I edited the pages tab on my blog based on the code sniplet and it works sooo good!
You rock!
Thank you once again!

Eniko, a fellow blogger

Jen said...

Hi there, This post was incredibly helpful for me to customize my blog, but I'm having a problem with the menu wrapping in IE7. It's fine in Firefox and Chrome, but wraps in IE.

Here is my code. Are you able to help me troubleshoot?

.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: #808080;border-right: 1px solid #A9A9A9;}
.crosscol .PageList A {display:block;width: 118px;height: 30px;font-weight:bold;color: #ffffff;text-align:center;text-decoration:none;}
.crosscol .PageList A:hover {background-color: #FFFFFF;color: #808080;}

Best,

Jen

maiaT said...

1. In this case, my navigation from this blog doesn't work either.
I don't have such "thing" as IE 7 installed on either of my machines but I checked this blog on Adobe browserlab and it looks normal.
Honest, I don't optimize for about ~2% of the visitors that for an inexplicable reason don't update.
If you check this blog and it look O.K. than send me your url to see what's the problem. You have to tell me at least, what template do you have.

By the way, beginning August 1st, Blogger discontinued support for older browsers: Firefox 3.5, Internet Explorer 7 or Safari 3, so no need to worry.

2. Read this tutorial, it might be helpful in fixing your menu.

3. go to a menu generator and grab yourself a handsome menu.
Let me know....

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.

Archive

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