How to Add a Menu Bar To your Blog-Blogger Hack

Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.

In this Page Layout you can see where I have added the Menubar. The code of this section is highlighted in this box:

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

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

To the CSS-part of your template, add coding for the menubar-id:

#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;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.

Original By - Ehtisham Khan-Edwardian

Related Posts by Categories

Widget by Hoctro | Jack Book