Adding a navigation bar to the Classic Blog template set

The Classic Blog template set does not have a navigation toolbar built into it. In order to add one, various templates will have to be edited to include a navigation tool bar, and some custom CSS will have to be inserted into the stylesheet template or into the stylesheet file that corresponds to the style that the user has selected. The latter is probably a safer approach for users who are less attentive to detail when managing their blog templates because StyleCatcher will overwrite custom additions to the stylesheet template when the user users StyleCatcher to select a new style for their blog.

The simplest toolbar HTML and Movable Type markup would look something like this:

<div id="navigation">
    <ul>
        <li><a href="<mt:BlogURL/>">Home</a></li>
        <li><a href="/about.html">About</a></li>
    </ul>
</div>

That needs to be inserted into every Classic Blog template that generates a web page, such as the main index, archive index and all of the listing archives. Put it right after <div id="content-inner"> in each of those templates in order to put it right above all of the columns on each page, and just below the page header.

The CSS is not very complicated either. This is the CSS that was used to create the demonstration navigation bar:

#navigation
{
    margin: 0px;
}

#navigation ul
{
    margin:0px;
    padding-left:20px;
    padding-bottom:20px;
}

#navigation ul li
{
    display: inline;
    border: 2px dotted red;
    padding: 3px;
}

Each user who wants to experiment with creating a navigation bar will have to modify this CSS to make it more attractive and better fit their particular blog's look. Another approach to the navigation bar is to create pages that correspond to basic information, such as About and Contact, and to use tags to find them. For example:

<div id="navigation">
    <ul>
        <li><a href="<mt:BlogURL/>">Home</a></li>
        <li>
            <mt:Pages tags="@about" limit="1">
                <a href="<mt:PagePermalink/>"><mt:PageTitle/></a>
            </mt:Pages>
        </li>
    </ul>
</div>

Here is an example of what the navigation bar described in the first half of this tutorial would look like. It may not be the prettiest thing, but it demonstrates the fundamentals of what needs to be done.