Adding a Menu Bar

There are actually several methods of adding a horizontal menu bar in your blogsite. However, the method that I have used in this blogsite is quite straightforward and does not involve any modification of the style sheet of the template. A menu bar is actually just a horizontal link list found on the header area. For instance, the menu bar may contain links to a profile page or to an interactive page for games or embedded chat rooms such as found in this blogsite. These pages could be separate posts within your site or external links. Remember, every blog post that you make has its own unique page URL. Simply click the title of the specific post you want to link to display the URL address.

Here are the simple steps you can follow to create a menu bar above the blog header:
STEP1. Open the HTML template editor of your blogsite and check the box that says "expand widget."

STEP2. Copy and paste the entire template onto Notepad or Word. Save the document as backup template. You may also use this document to edit the HTML codes of your template.

STEP3. Locate this section in the HTML template of your blog:

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

STEP4. Change the maxwidgets to "2" and also change the showaddelement to "yes". Save your template and view the Page Elements tab of the template. You will notice that an additional Page Element box appear above the Header box.



STEP5. Click the "Add a Page Element" on the new Page Element box above the Header box. Select the add text option.

STEP6. Type the names of links that you want to appear on your menu bar. Type these names as one line with verical separators. For instance, you may type the following:

HOME|ABOUT ME|CHAT|PICTURES

STEP7. Now comes the tricky part. You must link each link name to a particular post on your blogsite. First, go to that particular post page by clicking the title of the post. For instance, if you have a post about a short autobiographical profile, copy the URL address of this particular link. You will use this URL address to create a link for the "ABOUT ME".

STEP8. Here are the codes that you should use to link each link name on your menu bar: <a href="url address"> and </a>. You have to enclose each link name inside these codes to create specific links. You simply have to specify the url address.
There is another method of creating a menu bar. But this requires the modification of the style sheet. I will make a post about this later. For now, the method that I have explained in this post will suffice for your basic need.