Adding a Horizontal Menu

I've always wanted to add a horizontal menu to my blog, and I never have (until today actually) because I thought it would take way too long and would cause me great frustration.

Thankfully, it's extremely easy! :)

I followed an excellent tutorial here. It is very easy to follow so feel free to check it out.

Let's begin!

Step 1.

Create a text blog.

*Go to your Dashboard

*On the upper right corner, there is a link to Create A New Blog

*The purpose of this is to protect your blog in case you mess something up. Once you are an expert you can easily duplicate your steps and apply the changes to your main blog.

*If you don't want to create a text blog, simply create a backup of your current blog by going to the Layout tab, and clicking on the Edit html and then Download Full Template. *Note* This will not save any gadgets you may have.

Step 2.

Enable additional gadgets to your Blogger Header.

*Go to your Dashboard

*Under the Layout Tab, click Edit Html

*Hit apple F on a mac or ctrl F on a pc and enter the following <div id='header-wrapper'> to locate the code

*The entire code should look like this:

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='The Loony Bin(Header)' type='Header'/>
    </b:section>
    </div>

*Don't worry, all you have to do is modify the items in red. Change '1' to '5' and 'no' to 'yes' and lastly 'true' to 'false'. That's it! Make sure you save!

Step 3.

You need to decide on what type of horizontal menu you would like to use: DynamicDrive.com has some awesome menus to choose from and they are all free. :) For this example, I will use the code for my menu. It is a code I retrieved from DynamicDrive.com but I modified the colors to match the look and feel of my blog. You can access the original menu here. If you do decide to browse DynamicDrive.com make sure you don't copy the first line of the code which looks like this:

and the last line of the code which looks like this:

</style>

Copy everything else in the middle :)

*Go to your Dashboard
*Under Layout Tab, click Edit Html
*Hit apple F or ctrl F and locate Footer. There will be several results, make sure you find the line that looks like this: /* Footer.
*Place your cursor just before the line /* Footer starts and paste the following code:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #989d2f; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: #bdc185;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid #abded7;
}

#modernbricksmenu2 a:hover{
background-color: #989d2f; /*Brown color theme*/
color: #bdc185;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #989d2f; /*Brown color theme*/
color: #bdc185;
border-color: #989d2f; /*Brown color theme*/
}

}

Good job! You are almost done :) Make sure you click Save.

Step 4

*Go to your Dashboard
*Go to the Layout Tab and click on Page Elements
*You will now see an option to 'Add a Gadget' right below your Navbar!
*Click Add a Gadget and select HTML/Javascript from the pop up
*Copy and paste the following code into the gadget window

<div id="modernbricksmenu2">
<ul>
<li style="margin-left: 1px"><a href="http://smashinggoodfun.blogspot.com" title="Home">Home</a></li>
<li><a href="http://picasaweb.google.com/aissa.mccorkle" title="Gallery">Gallery</a></li>
<li id="current"><a href="http://aissbox.blogspot.com"
title="How To's">How To's</a></li>
<li><a href="http://www.youtube.com/user/iceiceaissa" title="Videos">Videos</a></li>
<li><a href="http://blogger.com/home" title="Dashboard">Dashboard</a>
</li>

<br style="clear: left" /></ul></div>

Of course you will want to change the Menu titles to whatever suits your needs and change the corresponding link for each to the link you want it to go to. Also, you can choose which tab is highlighted by default. Just add the text in green to whichever tab you want highlighted by default.

Voila! You are done :)

How To's