Thumbtack-purpleI'm excited to share this new series with you, called "101 Blogging Tips". In the series there will be 101 blogging tips that you can begin applying to your blog today! Don't wait, get started now!

Tip #38: Use a Dropdown Menu

One way of uncluttering your blog and sidebars, and make it easy for your readers to find what they are looking for, is to use a dropdown menu at the top of your blog (in the Nav Bar area). Being at the top, again, makes it so easy to find and for your readers to use it.

Many WordPress themes have Custom Menus which allow you to quickly and easily build a navigation menu with dropdown items without any code at all! Very cool! 

For Blogger and TypePad users, you have to write the code yourself – bummer – but it can be done! Here is where you can find the code and begin. Although it references sample starting code in TypePad, you use the same code for Blogger blogs!

In WordPress

  • Go to Appearance and then Menus to get started.
  • Name the Menu at the top.
  • Then on the left side you will see where you can add (check off) pages you want to "add to menu".  You an also add a "custom link" that is to a URL such as a post or another site (basically not a page listed).
  • You can drag and drop the menus into their position, and put under one another if you want a dropdown effect.
  • Save the Menu.
  • Then in the upper left side, for default menu, choose the name of the new menu you created.

In Blogger

  • You'll go to Layout and Add a Gadget (old Blogger Interface is in Page Elements under Design), and choose the HTML/JavaScript gadget and you want this gadget under the banner.
  • Copy and paste in this code to get started (yes, it is for TypePad, but the same code is used for Blogger).
  • Use this Q&A article I wrote as a guide on how to customize the dropdown menu further.
  • Save Changes when you're done.

In TypePad

  • Go to Design and then Content.
  • Check the box for the Nav Bar and then to the right side click the pencil to edit the Nav Bar.
  • By default you see the Basic nav bar of 10 items, click on Advanced to go to the code.
  • Here is where you wil delete what is there and use this code as a base, or continue modifying the sample menu that is already there for you in code.
  • Save Changes.
  • Then when in the main design/content window, remember to Save Changes again (this is a must of the changes to the Nav Bar will not be saved).


Pin It on Pinterest