Add a Menu to your Blogger page

I thought it would be a nice idea to add a horizontal menu to the top of my Blog page. I was thinking that the tabs should consist of a “Home Page” to take the visitor to the newest page, an “About me” that would jump to the Google Blogger About me page and a “Contact me” tab for those who do not wish to leave a public comment on the blog but prefer instead to send me a private email.

The Menu

I found the code to make a simple menu on this site:

http://www.dynamicdrive.com/style/

1. Log in to your Blogger account and click on the “Layout” tab. Then click on the “Edit Html” tab on the next line below. A box will appear entitled “Edit Template” which contains the Html text for your Blog’s page layout.

2. Make a backup copy of the default template before you begin just in case you mess this up or wish to remove the menu at some stage.

3. Find the line in the text that reads:

/* Footer
----------------------------------------------- */

Copy the two lines and paste it directly above the original.

Replace the word “Footer” for “Menu” for the top comment line.

4. Insert the following code between the two comments:

/*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .underlinemenu{ font-weight: bold; width: 100%; } .underlinemenu ul{ padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin: 0; text-align: left; //set value to "left", "center", or "right"*/ } .underlinemenu ul li{ display: inline; } .underlinemenu ul li a{ color: #494949; padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; border-bottom: 3px solid gray; /*bottom border is 3px*/ } .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{ border-bottom-color: black; }

5. Save the template.

6. Next we need to create the Menu gadget. Click on the “Page Elements” tab and click on the “Add a Gadget” link just below the title box. Select an “HTML/JavaScript” gadget.

7. Leave the title blank and paste into the Content box the following code:

<div class="underlinemenu"> <ul> <li><a href=http://yourblognamehere.blogspot.com>Home Page</a></li> <li><a href=http://www.blogger.com/profile/your profile id here>About Me</a></li> <li><a href="http://yourblognamehere.blogspot page to contact me here">Contact Me</a></li> </ul> </div>

Obviously you should fill in the bits in red with your own urls.

Save the gadget.

Your Blog should now have the following menu displayed below the title box:

Creating the Contact me page.

1. First we need to create our Thank you page to jump to after the person has submitted his/her comment.

Create a new post called “Thank you Page” and write whatever you want the visitor to see after submitting the comment. For instance:

Thank you for posting your comment. I shall read it as soon as possible. Reb Mordechai

Copy and paste the URL of that page to notepad. We’ll need it soon.

2. Go to this site and create an account at emailmefrom :

http://www.emailmeform.com/

Once you have created your account and confirmed it, the next stage is to “Create a new form” within the emailmefrom site that will contain the HTML code to build our “Contact me” form page.

Run through the wizard and paste the “Thank you” page url in the appropriate field.

3. After the wizard has completed the site will give you the option of copying the HTML code you will use to build the “Contact me” page.

Copy the HTML text in the box.

4. Create a new post on your blog titles “Contact me Page”.

Go into the HTML edit tab and simply paste that HTML code for the “Contact me” page into the box.

Publish the post and your “Contact me” Page is complete.

5. The final stage is to copy the url of the “Contact me” Page into your “HTML/JavaScript” gadget code.

That’s it. You now have a working menu with a Contact Page option that sends you an email.