Menu Bar with CSS Definitions

(Related Topic: Adding a Menu Bar)
Menu bars are the basic navigation tools of a website. Menu bars allow the visitors or users of a website to conveniently navigate from one page to another. Without the menu bar or any other navigation links, all the contents of a website have to be placed on the front page. This would be tantamount to printing a whole book as a long scroll rather than the more practical leaf-page format. The menu bar is comparable to the index or table of contents of a book. It allows the readers to find the particular page or contents that they want. Thus, the need for scanning the whole book is eliminated.

Even blogsites may need menu bars for easy navigation. For instance, this blogsite features a simple menu bar located at the top portion of the header area. This menu bar leads to the different resources and information found on this blogsite. Since each blog post is located on a unique page, you can link the important pages to the items of your menu bar. For instance, I have included the following items in my menu bar:

HOME||CHAT||GAMES||SLIDES||BLOGROLL||ABOUT||CONTENTS

The menu bar of this blogsite was created using simple text links. There is another way of creating a Blogger/Blogspot menu bar using CSS definitions. CSS adds text effects to the menu bar. In my previous post on this topic I have discussed the simple method that I have used for this blogsite without using CSS definitions. In this post I will discuss the method that utilizes CSS definitions. (For an example of Blogger menu bar with CSS definitions, visit this site: Much Ado About Nothing.)

Here are the steps that you should follow to create a menu bar for your Blogger/Blogspot site:

Step1: Create a new header page element. To do this, please refer to this post: New Header and Crosscol Elements.

Step2: Find the HTML section that is shown below and add the red-higlighted codes.

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

Step3: In the style sheet section of your template, add these CSS codes:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Step4: Save your template and go to the Page Elements tab. You will notice that a new page element box has been added above the header title. Click the Add a Page Element link and choose Link List as the new page element. You can now start linking pages from your blogsite posts or from other sites.

Please continue reading...

First paragraph only...

Hiding the Navigation Bar

Have you noticed the bar on top of your Blogger/Blogspot site? It is called the navigation bar. It contains the search box and other links that can be conveniently used when you are editing your blogs. However, some bloggers would prefer to dispense of the said navigation bar. There are many reasons why you might like to remove the said bar. One reason would be for aesthetic purposes. You might want your blogsite layout to have a more professional feel. On the other hand, you might simply want to add other functionalities on your layout. Whatever the reasons might be, it is still not advisable to permanently remove the said bar. You might end up having difficulty navigating and editing your blogsite if the navigation bar is permanently removed. One solution to this is to simply hide the navigation bar by adding a CSS code on the template of your blogsite.

To hide the navigation bar, first find the "credits section" on the template of your blogsite. The credits section contains the name of the template designer. This section resembles the sample below. For the sake of illustration, I have used the credits section of this blogsite's template.

<b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
Modified by: Homar Murillo
----------------------------------------------- */

The aforementioned section is located on the upper part of your blogsite template. Hence, it is very easyto find. Immediately under it, add this CSS code:

#navbar-iframe {
display: none !important;
}

Now you are done. It is as simple as that. Save your template and view your blog. If you want to restore the navigation bar, simply remove the aforementioned CSS code.

Please continue reading...

First paragraph only...