Blog Tipz

If you use Blogger, you’ll find that there are only a very few themes that integrate a drop-down menu into them, and it is often difficult to make modifications to them. Horizontal and drop-down menus are great for showcasing more content. Many popular/premium WordPress themes integrate this feature, and it is common on many large news/content-rich sites for the simple fact that it makes it much easier to showcase more content.

To use them effectively, you need to include solely categories or pages, or both if you are able to fit two menus (one above your logo/header, and one below) within your template. Only the most popular links should be placed in these menus, otherwise it will become cluttered, and rather quickly. At most, only place seven or so links in this area, as the average width of websites prevents much more. Categorizing your pages using the drop-down techniques will certainly help.

There are three pieces of advice I have for anyone who wants to attempt using the procedures listed:

1. Backup your template using the “Download full template” link within the Edit Template area.
2. Know that using any of these “hacks” may break more elements of your template, so you have to know how to correct them.
3. Using these drop-down menus may cause more problems, especially on un-supported themes, and you need to know CSS to better integrate them into your site.

Where to Implement

HTML and CSS menus can typically be “easily” implemented within the back-end panel, through the “Edit HTML” area.

Knowing how Blogger templates work is really key in this, as everything will be manual. You have to realize that it can take well over an hour to properly implement a rather “major” change like this within your website.

You should be starting with this tutorial, which showcases where to implement a basic (although not a drop-down menu).

Essentially, look for the </b:skin> tag within your template, then add the code provided on their site (if you want that look), which is CSS (cascading style sheets). Generally, Blogger templates are split into several areas, alternating with CSS and HTML. Therefore, there are more areas you will have to change, as outlined in their post.

Great Menus to Use within Your Blog

There are a number of great templates available within your blog. I traditionally haven’t added too much code to my posts, instead providing resources to my readers, so this will be no exception.

Flickr-like Horizontal Menu – This menu utilizes CSS and JavaScript including a show/hide sub-navigation menu.

Dynamic Drive CSS Menus – These menus are some of the most popular, and they can generally be easily adapted upon based on your needs. Many utilize jQuery.

Best Practices and Examples for Designing Menus – A guide and resource for people who want to customize their menus.

Suckerfish Drop-down Menus – Beginning with a bare-bones drop-down menu, this one is lightweight and ideal for most sites and people who have some background in editing their theme.

Multi-Level Drop-Down Menus for Blogger – This tutorial is fairly easy to follow through, and uses the same templates from Dynamic Drive for implementation. There are just a few steps.

A Simple Drop-Down Menu – While the others are mostly manual in editing, this one can utilize an HTML/JavaScript widget within the sidebar for slightly easier editing.

Conclusion

Utilizing any of the tutorials listed above will surely help you build a more professional navigational structure within your site. If you have any thoughts on those listed above, please return here to let me know what you think. As in the case of this site, drop-down menus save space and offer more specific areas for visitors to travel to.