Blogging Sueblimely

Today is the fourth course in my series on blog navigation menus – dessert. Some ‘sweet’ menus for you to copy – suitable for WordPress and Blogger.

Here is the html code you will need for all the examples:

HTML

<div id="menu">
<ul>
<li class="selected"><a href="http://www.your home page.com">Link2</a></li>
<li><a href="http://www.your link.com">Link2</a></li>
<li><a href="http://www.your link.com">Link3</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
</ul>
<div class="clear"></div>
</div>

Menu Bar

CSS

<style type="text/css">
<!--
#menu, #menu li a {background-color: #8AAADF; color: #ffffff; font-size: 1.0em; font-weight: normal; height: 1.5em; line-height: 1.5em; text-decoration: none; }
#menu, #menu li {padding: 0; margin: 0;} #menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; }
#menu li a { background-color: inherit; display: block; padding: 0 10px; border-right: 1px solid; border-right-color: #ffffff; }
#menu .selected, #menu a:hover { background-color: #B9CCEC; color: #ffffff; text-decoration: none; border-right: 1px solid #537495; border-right-color: #5B80A4; }
-->
</style>

Tabbed Menu

CSS

<style type="text/css">
<!--
#menu, #menu li a { color: #000000; font-size: 1.0em; font-weight: normal; height: 1.5em;
line-height: 1.5em; text-decoration: none; }
#menu, #menu li { background-color: #FFFFFF; padding: 0; margin: 0;}
#menu {border-bottom: 1px solid; border-bottom-color:#83E292;}
#menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; margin-left: 10px; }
#menu li a { background-color: #83E292; display: block; margin: 0; padding: 0 10px; border:0;}
#menu .selected, #menu a:hover { background-color: #A0E9AB; color: #ffffff; margin: 0; font-size: 1em; text-decoration: none; border:0;}
-->
</style>

You will of course need to change the links to your own: Copy the code for your chosen menu into a text editor such as Notepad or Wordpad and alter the links to point to where you want them to go. This means altering not only the link text – e.g. Sausage Links – but the hyperlink too. Change http://www.your link.com to the address you are pointing the link to. (remember that blogger does not use the www prefix so you homepage will be something like http://yourbloggeraddress.blogspot.com)

These menus, styled using CSS, are infinitely changeable. If you wish for a thicker menu bar change the height and line height values (currently 1.5em). Change the colors to suit the rest of your blog by changing the values for "background-color" and for text "color".

How to use them in your blog:

Blogger

You can do this by adding an "html/javascript" page element. Firstly you need to make sure you are able to add the page element in the place you want it.

Go to your layout/html section and backup your current layout. Tick the "expand widgets" box. You can alter either of the following two tags (you may not have the crosscol wrapper so will need to alter the header section.

Change:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"no"'

To:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"yes"'

Or:
Change

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

To:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

If you already have 2 widgets add another and so on.

Now go to your layout/add element area and add an HTML/Javascript element to the header or cross column section. Copy and paste the CSS and the html code from your chosen menu into this. Alternatively, add just the html code to your html/javascript element and put the css into the style area of your template. Because Cascading Style Sheets cascade you may find the font size of the menus too larage or small so change the "font-size" in the html.

WordPress

You can approach this in two ways. If you already have a horizontal navigation menu built into your theme then you can just style this. The default WordPress menu is already called "menu" so the only changes that are needed are to the your style.php file. From the menu examples above only add the CSS styling portion (the code between the "<style type="text/css"><!–" and "–>
</style>" tags), replacing any tags of the same name.

If you do not have a horizontal menu bar already you can add one by adding the html code to your themes header.php file – just below the header division.

If you want to get fancy then instead of your home page address you can use this line instead.

<li><a href="<?php echo get_settings('home'); ?>"></a></li>

The next and final course in this menu tutorial will be made of a variety of fresh ingredients to tempt you to indulge yourselves.