Create Horizontal or Vertical Navigation Menu Bar to categorize posts in Blogger

For any website or blog, it is very much important to categorize articles properly. It increases the readability of your website or blog and decreases the bounce rate which helps to improve website overall rating. If you are using blogger to manage your posts, then it is really easy to categorize contents using 'Label' tag. Here first we will see how to categorize posts in Blogger and then create Horizontal or Vertical Navigation Menu Bar.

How to add label with articles in Blogger?
To add label with articles, you can follow either one of below two options.
First option:
- Go to your blogger dashboard and open the article to add label
- At top right hand side corner, you will see post settings option. Now click on the 'Labels' tag and write the tag name. You could add more than one label with an article, separated by comma. Once you have added all desired tags, click on Save button.
categorize posts in Blogger - blogtlog.com

Second option:
- Go to your blogger dashboard and select the post by marking the checkbox

- Now click on the 'Label' icon to add new label or choose from existing labels if you have
Create Horizontal Navigation Menu Bar in Blogger - blogtlog.com

Now our first task is completed, all articles are tagged with labels now. Next task is to display labels on a navigation menu bar, it could be horizontal or vertical. First we will discuss how to add labels on a horizontal menu bar and then vertical.

Follow below steps to add labels on a horizontal menu bar:

Step 1: Verify, you have 'Add a Gadget' rectangular box just below Header widget or not
Create Vertical Navigation Menu Bar in Blogger - blogtlog.com

If you don’t have it, then you have to modify Blogger template to add the placeholder. To know how to add 'Add a Gadget' in Blogger Header, read our article How to add a gadget or widget inside blogger header or above post (body).
   
Step 2:
Once you click on 'Add a Gadget' link on the rectangular box. it will pop up 'Add a Gadget' window. Now search for the gadget 'Pages' and click on plus sign to add it. It will open another screen on the same window to add link. Here there is a catch. Before Google’s recent upgrade, blogger used to have '+ Add Link Page' option under page order section to add labels on navigation bar but recently Google has removed this link. So here we will use '+ Add external link', available under 'Pages to Show' section to meet our goal.

Step 3: 
- Click on 'Add external link', it will open new pop up window asking Page title and Web address URL. Page title will be displayed on navigation menu bar, so choose relevant name or enter the name same as label name. On Web Address URL field, type the URL of the post label. URL for a Blogger post label looks like http://your-blog-name.blogspot.com/search/label/label-name
- Replace 'your-blog-name' with your blog name and 'label-name' with label name on the above URL 
If you have any space or special character on label name, then it is better to replace it with HTML specific string, like blank space with '%20' or / with '%5'.
- Save URL and page popup window, it will take you to blogger dashboard
- Click on ‘Save Arrangement’ to save blogger layout

That’s all, refresh your blog and you should see nice horizontal navigation menu bar. If you want to place the navigation menu bar vertically, then just drag and drop the gadget on vertical gadget bar and click on 'Save Arrangement' button. We could modify CSS script as well to improve look and feel of navigation menu bar. We will discuss this in our next article.
If you have any doubt or question, please write us. For more updates on recent activities, follow 'BlogTlog' on Facebook / Twitter / LinkedIn or join our website as follower.

No comments:

Post a Comment

Thank you for your valuable comment. It will be published soon.