- Internet & the Web
Blog Horizontal Navigation Bar: How to Create a Bar and What to Include
The Importance of Blog Navigation Bars
I recently redid a large portion of my blog design, which included adding a handful of tabs to my blog horizontal navigation bar. My Blogging Business Artisan teammates thought that this would make a good topic for an article for our team so I decided to write a hub about it. Although a navigation bar is not an essential tool for a blog, it can be very useful. My primary reason for updating my bar was to reduce clutter in my sidebar. I had let a lot of lists and icons build up that did not need to crowd a long side bar. I ended up making my blog format wider so I could add a second sidebar. I moved several components out entirely and split the rest up between the two side bars, greatly increasing the overall organization of my blog. This hub will give you the tools that you need to start building or reorganizing your navigation bar so your tabs are useful and your blog is well organized and clutter free.
Resources for Creating Bars in Blogger and Wordpress
Before you worry about what tabs you'll need or how you will organize them, you need to create a navigation bar for your blog. I'm including resources for Blogger and WordPress bars, as these are two of the most widely used blog platforms right now. Do not feel limited by these resources. There are other options available for different platforms.
WordPress: I do not use WordPress so I am not as knowledgeable about it, but it is fairly easy to set up a bar there as well. This post contains links for 5 great WordPress navigation menu tutorials. You can decide which one fits your blog the best.
Horizontal Vs. Vertical
Thus far, I have only referred to horizontal navigation bars. Currently horizontal bars are common place among blogs and web sites. The vast majority of tutorials and codes out there for bars are for horizontal ones. There are no readily available resources for creating vertical bars in Blogger or WordPress. If you want to go with this option, you will most likely have to create the code for it from scratch. If you use a web design program, such as Dreamweaver, you will be able to make the bar with your program, such as with this tutorial. There are a number of other CSS tutorials available as well.
Outside Links Vs. Blog Pages and How to Create Pages
You can create tabs for two different types of links: outside links or blog pages. There are any number of possibilities both types of links. Examples of outside links include other web sites that you have and social media pages. Blog pages can be any internal pages for your blog that are relevant for your readers such as information about yourself, resources for your readers, and contact information.
Creating Pages: Blogger
To create a new page in Blogger, click on New Post, then Edit Pages, then New Page. When you are ready to publish your new page, you will get several options for how to display your page. If you only want the page to show up in your navigation bar, check the No Gadget option. After you have published your page, link the URL for it in your navigation bar.
Creating Pages: WordPress
For all of the information and tutorials that you need to create pages in WordPress, check out this site.
Overview of My Tabs
Here are the tabs that I currently have in my blog navigation bar. They include both outside links and blog pages. For additional tab ideas, keep reading.
Home: It is always a good idea to include a home tab on your navigation bar. You never want someone to navigate to a new page in your blog and not know how to get back to the home page.
Etsy Shop: Even though I have a couple Etsy widgets in one of my side bars and link to Etsy items in my blog posts at least 1-2 times per week, I still get questions about where people can buy my jewelry online. Providing a link to the Etsy Shop in the bar decreases the number of these questions.
Facebook: My Facebook Fan Page consistently ranks in the top 5 traffic sources for my Etsy shop. I want to make sure that all new fans and blog followers "like" my page so I have the link front and center in the bar.
Twitter: I don't get nearly as many clicks from Twitter, but I'm also not as active there as I am on Facebook. Some people prefer Twitter so I like to have the link readily available. I primarily use Twitter for my business. If you only use your Twitter account for personal interactions, it may not be appropriate to include it on a business related blog or vice versa if you have a personal blog and a business Twitter account.
Mailing List: I use MailChimp for my mailing list, which has a URL for a mailing list sign up. The easier you can make it for people to sign up for your mailing list, the better.
Crafty Articles: When I started writing for HubPages, I linked crafty and other Etsy related articles in the side bar of my blog. Some 20+ crafty/Etsy hubs later, this section of my sidebar is completely cluttered. Not wanting to remove this from my blog entirely, I simply moved the articles into a separate page that is linked in the bar.
Etsy Seller Resources: This is another sidebar section that I have continued to expand as I've become more and more involved with Etsy. It is a simplified version of the hub that I linked here. It was another easy choice to move into a separate page and link to the bar.
PDF Patterns: Some of my most popular items on Etsy are my beading PDF patterns. Many people who read my blog purchase handmade items and even more of them make their own handmade items. I want to make my patterns prominent to this audience. For a long time, I only had a few patterns so it made sense to keep them in the sidebar. Now my larger pool of patterns are much better situated in a separate page with a link.
Advertising: One of my newest efforts on my blog is to take in private sponsors who can pay a fee for a monthly ad spot on my blog. I created a tab for a page link that explains how this process works.
Other Ideas for a Navigation Bar
Here are some other commonly used tabs for navigation bars.
About Me: I choose to include my About Me information in the About Me section of the Blogger profile. When I did this recent blog rearrangement, I rewrote my bio and moved it to a top spot in one of my sidebars. It's important for people reading a blog to know a little background about the author. Instead of or in addition to the default About Me spot, some people choose to create a separate page for this information and link it in their bar.
Contact Information: Think about the information that your readers will need. For example, if you have a studio or shop where people can find your work or visit you in person, you may want to include this information in the contact page. However, if you primarily sell through an Etsy shop, it is most likely not appropriate to include your personal address and phone number.
Upcoming Events: This section is applicable to people in a number of different fields. Events can include fairs, shows, gigs, concerts, exhibitions, and more. At this time, I don't participate in enough craft fairs to warrant a separate page and tab link, but if I this ever changes, I will consider including this on my blog. If you do have a lot of in person events, your blog can be a great go to resource for people to see what you're up to this month.
Awards: Blog awards and other online recognitions can clog up blog sidebars. It's easy to put one or two up and keep adding without realizing that you have reached ten or more of them. Even if you haven't done this yourself, I'm sure you've seen blogs where this is a problem. Awards can be nice to leave up for a while, especially when they relate directly to your blog content, such as an award for being a great DIY blog. However, they don't need to clog up your main page.
Reviews: Sometimes people like to post reviews of their blog or some aspect of their business, such as reviews of shows or feedback on products. If you want to post more than one or two reviews, move them to a separate page and create a link.
Other Web Site Links: Obviously you won't use this title for this tab in your bar. If you want to link another blog or web site that you run or any other relevant web site, you can create a tab for it. Generally you can simply use the name of the given web site that you are linking as the tab title.
Other Resources: Again, you'll have to title this appropriately. If you have any other resources that you've created, you may want to create prominent links for them. For example, some bloggers develop blog buttons (i.e. e-mail, Etsy shop, etc.) that people are free to take. Make sure that your readers know how to find this great content.
Anything else that you'd like to see here? Let me know!
Make sure that your tabs are relevant for your blog, but don't be afraid to have fun, too. For example, f you've find a hilarious link that you feel the world needs to see, especially if it relates to your blog content, don't be afraid to create a tab for it. People enjoy seeing the person behind the blog come through in the content so keep your blog customized to your own interests and personality.