Adding A Menu Bar in Your Blogger Header

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:

  1. Font size of 85%, margin of 20px and added a tag to float the element to the right side of the page.
  2. 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.
  3. 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.
  4. 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’/ –>

Let me know if you need more detail for your Blog template. The article I used also tells you how to add the menu bar above or below your header. If you’ve longed for a menu, I encourage you to try it on a test blog.


Be sure to read other posts on blog design and template tips.
Choose Your Template Wisely
Add Style To Your Menu With Buttons – builds upon this post.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


7 Comments

  1. Pulkit, You need to take one step at a time. I think you looked at the wrong section of the post I sent you to [obviously it’s the clearest tutorial I found, but still confusing since he wrote about 2 topics!] Make sure you’re following this part of the page at “Tips for New Bloggers”: Text Link Menu Navigation Bars for simple navigation bar. Not the link list in sidebar!

    His post should have said Go to Layout, Edit html tab.It should have made it clearer for you by telling you to do a search for the proper place to insert the code. So first go to Layout, Edit Html, then do a search (press Ctrl + F) for the word “#header” Then insert his code BEFORE that line.

    #newnavbar ul li{
    font-size:100%;
    list-style-type: none;
    display:inline;
    padding:0px;
    margin:10px;
    border:0px solid;
    }
    — follow other steps. Your template has maxwidget of 3 and show=yes so don’t worry about that (I guess you added it.)

    Once you have a horizontal menu bar let me know. We can resume with my post at that point!

  2. hi dear!
    Hope ur in rocking spirits as always…
    (http://pulkittestingblog.blogspot.com/)
    read the whole post @ (
    http://tips-for-new-bloggers.blogspot.com/2007/08/horizontal-menu-navigation-bar.html
    )
    have worked on it…. and so here is the final process till where I had
    reached!
    hope all is fine here till now 🙂
    check the test blog…. and then let me know if I can continue the process
    for My Blog (http://19goes20.blogspot.com)

    U had been a great great help as always….
    Just as this whole nav bar procedure ends … I promise U to leave a link
    back of ur URL for all my visitors on the My blog "hugs!"
    regards
    PULKIT
    On Wed, Apr 15, 2009 at 9:01 PM, deter will rule thw world <
    pulkit.tiwari@gmail.com> wrote:

  3. Finally! Congratulations, the header on your test blog is fine. You can change your real blog now to add the text links while it’s fresh in your mind. For the next steps continue using the test blog first. But you need to decide exactly what you want to do, and if you want a search bar like mine (on top left)decide where it would go on your blog — maybe at top of side bar? For stylized menu buttons maybe a gray color. But simple text might work for you. Your choice. Can’t wait for link-back hugs… lol

  4. came online today after a week long gap!
    working on the hover effects now!
    not able to get them… unless the hover effects come… the links still
    look like hyperlinks yaar! 🙁

  5. The hover works fine! You just need to adjust the space between the header image and the sidebar. So take these two steps:
    1. Find
    #newnavbar {
    margin:-20px -450px 40px 140px; ** change this line to
    margin:-10px -450px 40px -20px;
    2. Find #sidebar-wrapper {
    Add this line: margin-top:15px;

    I’m not sure why you have the Google friends widget ahead of the Post? Do you want it to appear that way? Just send me a BC note.

Comments are closed.