If you are looking for adding a functional navigation bar for your blogger’s website, this is the place to be. Check out this easiest “two steps” methods to add a beautiful navigation bar in just minutes.
Firstly, I have to mention that although Google’s Blogger has a built-in “Navbar” which has a “search box”, a “share button” and a “Next Blog” tab, this is not the navigation bar that I need to add to my blog. Actually, I prefer to turn this “Navbar” off by going to the ” Layout” , then edit “Navbar”, scroll down to the “off” radio button to turn this off.
Step 1: Using labels to define your navigation bar tabs
After you have a few posts published, choose “labels” under the “Post settings” which is on the right side of your screen, here carefully choose keywords for each of your articles. This is the place you can also add a keyword that you like to use as your tab name.
Bear in mind that in order to group articles under different tabs on the navigation bar, include the same keyword in the labels to group the related articles under the same tab. If I choose “For Girls” as one of my tab on the navigation bar, I should include this phrase into all the labels of the related articles.
Step 2: Create your navigation bar
For creating a navigation bar, select “layout” on the dashboard screen. There is a “Navbar” section on the screen that we mentioned earlier to get rid of.
Now, under the Header section, select “Add a Gadget”, scroll down to find “labels” to add. You will see a pop up window like this:
Make sure the “title” box is left blank.
After choosing the “selected labels”, using “edit’ to select the keywords you chose for navigation bar tabs.
There is a little tip here:
In order to group the labels the way you want, choose sorting “Alphabetically”. Hence you should choose the keywords wisely when you plan out your navigation bar tabs so that you can sorting all articles in alphabetical order and still be able to present them the way you like.
Under the “display”, make sure not to tick the “Show number of posts per label”.
It is all done. Now you should have a beautiful functional navigation bar on your Blogger’s blog.
For including any new posts under any tabs, make sure to use the specific keywords that you’ve chosen for the tabs’ names.
You May ALso Like:
An even simpler html coded navigation bar when you only have a few pages on your blog
Since it is free, many people like to use Google’s blogger platform to create small niche websites with only a few pages. In this situation, you can create a simple html coded navbar with your own color and font choices.
1. Go to “Layout”
2. Choose “Add a Gadget” under your blog title section
4. Add this code into the box:
What you get is a navigation bar like this:
If you wish all the tabs align to the left, you can change your code from “text-align: center;” to “text-align: left;”.
You can change color, font, padding…etc to design a navigation bar of your own taste. Voila!, you got your simplest navbar for blogger.
**Disclosure of Material Connection:
Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally or believe will add value to my readers. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials.”