Subscribe to exclusive tips of making money online.
Enter email address:
@onlinebzDOTcom

Join Me on Google

Two Easy Steps To Add A Navigation Bar on Blogger (blogspot.com)

Share This...Share on Facebook7Tweet about this on TwitterShare on Google+0Share on Tumblr0Share on StumbleUpon0Buffer this pageEmail this to someonePrint this page

navigation bar for blogger
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.

Now I am ready to add a more useful navigation bar that could help visitors to find what they want to read in a website – in two easy steps:
Add navigation bar to blogger

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.

rank high on amazon  - turn amazon into your own money printing machine.

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:

add a navigation bar to blogger

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.

Related Books from Amazon:
blogger's bootcamp - amazon best seller for blogger's blogspot
[AMAZONPRODUCTS asin=”1430230126k,B003EINO3U,B0091ISTUU” listprice=”1″]

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”.

Now, save.

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:

1. How to Sell Ads Space on Your Websites

2. Use Hootsuite to Manage All Your Social Media Accounts

3. Get Paid to Read Emails | A Free $10 Today

4. How to Create a Website and Make Profits?

5. Why Choose WordPress as CMS?

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

3. Scroll down the gadgets drop-down menu to choose “HTML/JavaScript”

4. Add this code into the box:

</p> <p style="background-color: #666633; border: 2px #999 solid; color: #cc3300; font-family: Arial; font-weight: bold; padding: 15px 20px; text-align: center;"><a style="color: white;" href="your 1st page url">one</a> ♦ <a style="color: white;" href="2nd page url">two</a> ♦ <a style="color: white;" href="3rd url">three</a> ♦ <a style="color: white;" href="4th url">four</a></p> <p>
What you get is a navigation bar like this:
navigation bar

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.

 

Subscribe to exclusive tips of making money onine.

Enter email address:

**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.”

23 comments to Two Easy Steps To Add A Navigation Bar on Blogger (blogspot.com)

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

commentlvu enabled. Please only use your real name. Comments without real name will be deleted.