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