The menu bar is a familiar part of most internet sites. It’s particularly useful in blogs. Menus point out key categories to let readers choose a path. This presupposes you have a well organized set of labels for your published posts. This exercise made it clear that mine can use a bit of pruning. But I wanted to get the menu added and put in a few key link buttons now.
There are many sources that explain how to add menu type links to the top of your blog. The key is finding one that’s accurate and easy to follow. It also helps to have someone like myself give you tips on ‘working it’ for your blog! This gives you a live view of the tutorial and what adjustments I had to make. I used portions of an article about horizontal menu navigation bars at Tricks for new bloggers. It did not take long to add clickable links on the top right hand side of the header and move the search bar to the lower left side.
ADDING MENU LINKS
The article shows you how to modify the template to add a page element for the menu links and force them horizontally across the page. It is very thorough and shows many variations. I suggest you skip the first part of the tutorial and go to the section on adding the “insert this style definition under /* Header */”. I modified their code as follows for my template styling:
- Font size of 85%, margin of 20px and added a tag to float the element to the right side of the page.
- Increased the header widget value to allow more page elements in the header layout (maxwidgets=’3′ showaddelement=’yes’). This allows me to add 2 elements since the first spot is taken by the blogger header container. One will hold the menu links and the search box in the other.
- Added a html/java element for the menu links. You don’t have to use the list type codes in the post (li. ), just type the link name and add a link address! I styled the element with span tags to position links on the right: style=”PADDING-RIGHT: 30px; FONT-WEIGHT: bold; FLOAT: right; MARGIN-LEFT: 20px; PADDING-TOP: 10px. Put the end span after your menu list of links.
- You can add visited link colors and hover effects. I added a link that really is a label search for any post with the ‘design’ label. Do this by clicking the label and copying the results page into the link address.
ADDING SEARCH BOX
The blog already had a search box in the sidebar. I copied the code a second header page element. That element was also added as html/java. The position was adjusted with span styling as in the menu bar:
FLOAT: left;font-color:gray; margin-TOP: 122px;
This required some trial and error for the exact vertical position of 122 px!
Positioning was made more difficult by the Blogger quick editing icon for widgets. As publisher only you see the icons when logged in. What you see is not what the reader sees in terms of the few pixels the icon takes up. But that’s crucial for spacing the search box on top of the header image. You may need to temporarily turn off the ‘screwdriver & wrench’ and the quick edit pencil icons as follows:
- goto Layouts, Edit your Template’s Html and check ‘expand widgets’.
- find the line <b:include name=’quickedit’/>
- turn it into a comment rather than deleting, so that you can restore it later
<!– b:include name=’quickedit’/ –>