It's a faith in technology.

Menubar in your Blog

Share on :

This tips 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.

The code of this section is highlighted in pink:

<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>

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.


1 comments:

Alexandra said... January 15, 2009 at 6:32 PM

Can you explain to me how to do it! I am not arriving to it... thanks!

Post a Comment and Don't Spam!

Thanks For Your Comment. You can also reach me at my mai Id :- blogtips.frd@gmail.com

 

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: