How to Add Menu Tabs in Blogger
How to Add Menu Tabs in Blogger
When I first started blogging, I was confused with the blogger layout. Blogger allows only posts to be created by default. So, it was a tough task to figure out how to add menu tabs at the top.
You must have came across various professional blogging websites and each one of them has beautiful tabs above it. How cool it would be if you can add the same feature in your Blogger blogs?
What's the use of the Menu Tabs?
Well, menu tabs are used for navigation across your various posts. Normally in the absence of tabs, you write a post then add some labels to describe the entire post aptly and then publish it. This will get added to your posts. Now, when someone visits your blog, then the person can see all your posts one by one lined up. Visitors then have to scroll past each post they come across to get to the next one. Don't you think that era of serial posts is way past behind? Wouldn't it be great if all your posts are ordered and categorized into specific groups? These tabs will make visitors task easy to find which topic he or she is interested in and see those topic related posts only.
Moreover even though you can add a gadget to show the labels related to the post, nobody likes to go through those all labels and determine what the post is about.
Plus, if adding tabs helps you too. It makes your task easy to assign a topic to your post.
Your all content remains organized.
What is the concept of pages in the Blogger?
In blogger there's an option to add pages to your post. But if you are a newbie, then it is really difficult to figure out what they do. Basically each page acts as a menu tab in the navigation bar. So, you must be wondering, 'If I add 100 different pages, will there be 100 different tabs?' Yes, there will be 100 different tabs in the menu. This makes the concept of pages not so useful.
So when to use the pages?
Due to above mentioned properties of the pages, you can make most out of pages if you want to add some static tabs that will remain unaltered forever. For example, you can use create the page saying 'About Me' or 'Contact Me' and then use it as a tab in menu. These kind of tabs are constant all the time hence pages are useful for such purposes.
Steps to Create Static Tabs using Pages
Step 1 : Go to the Pages option from left side of your blog console.
Step 2 : Then add new page, enter some name for it and write the information needed to display and hit on save.
Step 3 : Go to Layout option and add a Pages Gadget in Cross-Column space if you want your tabs to appear on top of your blog or in Sidebar if you want it to appear in either of the sides depending on your blog's layout.
Remember, this step helps to add the tabs feature and will be explained later on in the same post.
Remember, this step helps to add the tabs feature and will be explained later on in the same post.
Step 4 : Hit on Save arrangement and check out your blog. You'll see the navigation tabs at the top.
Till now we've added simple page to our blog and it created a static tab on the top. Now, we will see how to write a post and create definite tabs and assign posts to that particular tab.
Create Dynamic Tabs and Assign Posts to it
I'm calling it dynamic tabs since the content under them is changing and not the tabs. So, don't get confused.
This is a workaround or can be called as a trick to create the tabs. Whenever you write a post, you add labels to them. These labels will help us to categorize them. As you can see I've created 5 tabs in my blog. Home tab is present by default, you can disable it if you don't want it. Follow the below method to add tabs.
Step 1 : First, decide what all tabs you need. Consider if you want to add a tab named 'How To' to your blog. Write a blog post by your usual means.
Step 1 : First, decide what all tabs you need. Consider if you want to add a tab named 'How To' to your blog. Write a blog post by your usual means.
Step 2 : Now before publishing add the label to named 'how to' or any suitable unique name that you will use for all the posts which you want them to appear under 'How To' tab. In my case I have label them under 'How-to'.
Of course you can have multiple labels and also same post can appear in multiple tabs depending upon the labels you put for them.
Step 3 : Publish your post and click on the 'How-to' label among the various labels appearing in your published post. Usually they appear at the bottom of the post.
Step 3 : Publish your post and click on the 'How-to' label among the various labels appearing in your published post. Usually they appear at the bottom of the post.
Step 4 : Upon clicking the label in step 3, you will be redirected to a certain page. Now, copy the URL from that page. You will need this URL in further steps, so save it somewhere.
Step 5 : In this step you will need the Pages gadget you created a while ago. So, go to Layout > Pages Gadget and click on 'Add external link.
Step 6 : Now, add a tab name you want to appear on top of your posts and paste the URL you saved a while ago in Web Address section of the prompt dialog box. Click Save Link.
Step 7 : Now it will create a tab and you can see multiple tabs if you've created multiple external links. You can arrange the order, enable-disable them, delete or create as many tabs you want.
So, in this way you will be able to create new tabs and whenever you write a post. Make sure that you add the particular label so that it will appear under the corresponding tab. This way your posts remain organized and also you can make them appear under multiple tabs too.
Although blogger does not create much sophisticated looking tabs, it's better than having no tabs.
By default all the tabs will appear on the left side of the page, which is a but annoying. But you can align them in the center if you want with a small CSS script, which I'll be sharing in my next blog post.
Although blogger does not create much sophisticated looking tabs, it's better than having no tabs.
By default all the tabs will appear on the left side of the page, which is a but annoying. But you can align them in the center if you want with a small CSS script, which I'll be sharing in my next blog post.
Comments
Post a Comment