My templates come with the ability to create menubar tabs with drop down pages beneath them. The menubar also comes with an automated 'blog categories' page. This is a tab in the menubar with drop down pages of all the labels that you use in your blog articles (see image below).
While the Blog Categories option in the menubar suits a lot of bloggers, I have gotten quite a few requests from clients to show them how they can set up their menubar in such a way that they don't have one big list of categories, but rather a few tabs along the menubar with specific drop downs for categories. An example of this can be seen below, where tabs are made for the subjects 'Beauty' and 'Lifestyle'.
The tabs each hold a couple of drop down options. These drop downs will take the readers to all the blog articles that are written about a specific subject.
Having your menubar set up in such a way creates an organized blog with a clean, professional look. So I understand the demand for this type of menubar. You might ask why I don't incorporate this kind of menubar in my
templates. The reason is that this type of menubar needs to be personalized to the needs of the blogger, and that is something that is an unknown factor when designing a premade template.
In this tutorial I am going to show you step-by-step how to create this kind of menubar yourself. I will show the tutorial for two different situations: in case you want some tab titles in the menubar with drop down subjects underneath them and in case you only need a single page on the menubar that needs to lead to all articles of a certain subject. So let's get to it!
SITUATION #1 -TABS WITH DROP DOWNS
#1 - MAKE SURE THE SET UP OF YOUR MENUBAR IS READY
We start this tutorial at the point where the blog template file itself has been installed and the menubar needs to be configured:
We start this tutorial at the point where the blog template file itself has been installed and the menubar needs to be configured:
• go to your Blogger Dashboard
• select 'Layout'
• go to the menubar section of the layout and remove all the unnecessary widgets in that section until you are left with these five widgets (also see image below):
- Social Icons
- Pages
- Dropdown Page 1
- Dropdown Page 2
- Blog Categories
We are now going to remove the Blog Categories widget since you will not need that large list of categories anymore.
We are now going to remove the Blog Categories widget since you will not need that large list of categories anymore.
#2 - CREATING THE TAB TITLES FOR YOUR MENUBAR
I am creating two tabs for subjects 'Beauty' and 'Lifestyle' and I am going to use Dropdown Page 1 and Dropdown Page 2 for this:
• Click on the 'edit' button of Dropdown Page 1
• Delete all the demo drop down options in this page by clicking on the 'delete' option of each drop down
• Then give the page the right title - instead of Dropdown Page 1, type in the tab title you are going to use - in my case that is 'Beauty'
• Now click on the orange button that says 'Save'
• You have now created your first tab title
• To create the second tab for 'Lifestyle' or any other tab you have in mind, follow these exact steps for Dropdown Page 2
In case you want to create more than 2 tab titles in your menubar that need drop downs underneath them, please follow the steps for adding more drop down menus on this page of the instruction website: http://dutchladybloggerguide.blogspot.com/p/menu-bar.html
scroll down to paragraph: >>> ADDING MORE THAN TWO DROP DOWN MENUS TO THE MENUBAR
#3 - ADDING DROP DOWN PAGES UNDER THE TABS
The tab titles have now been created, it is time for the drop down pages. In this tutorial I will be adding two drop downs to the 'Beauty' tab and I am going to name them 'Hair' and 'Makeup'. In the end I want the menubar to work in such a way that if a reader clicks on drop down page 'Hair' they will be taken to a page that shows all my articles about 'Hair'.
In order to create a drop down that leads to a page with articles on one specific subject we need to start using labels in the blog articles. Labels work like keywords to describe the subject of a blog article. You can add as many labels as you wish to a blog article. If you are not yet familiar with adding labels to your blog post, please visit this page of the instruction website to find out how and where to add them: http://dutchladybloggerguide.blogspot.com/p/blog-page_10.html
Scroll down to paragraph: >>> ADDING LABELS TO YOUR BLOG POST
I want to create a drop down for the subject 'Hair', therefore it is important to use the label 'hair' in the blog articles that talk about hair stuff. Make sure that each time you use a label in a blog post, you write it exactly the same. So if you write your labels in lowercase, you have to keep doing this each time you add that specific label to an article.
>>> In case you already have articles with labels on your blog
If your blog is already up and running with articles that have labels on them, this is the way you connect one of your labels to a drop down:
• Go to a blog post that has the label in it that you want to turn into a drop down - in the case of this tutorial that is an article about hair with the label 'hair'
• Click on the label underneath the blog post
• It will take you to a page that shows all your articles about hair
• In your browser bar you will notice a link
• Copy this link
The next step is to connect this label link to a drop down page, so here we go:
• Go to Blogger Dashboard
• Select option 'Layout'
• Go to your menubar section and click on the 'edit' option of the 'Beauty' tab
• Now type a title for your drop down page into the title bar - in my case this is 'Hair'
• In the box underneath the title you can now paste the label link that you just copied
• Click on 'Add Link'
• And don't forget to save with the orange button
If you now go view your blog and hover over menubar tab 'Beauty', you will notice that drop down 'Hair' appears underneath it. When you click on it, it will take you to the page where only articles with the label 'hair' will be shown. You have just created your first blog category page!
For adding my second category called 'Makeup' I am going to repeat all the steps mentioned above. When I have added the title and link under the Beauty tab I can decide to place 'Makeup' above or under 'Hair' by using the little arrows. Don't forget to save again.
• Now click on the orange button that says 'Save'
• You have now created your first tab title
• To create the second tab for 'Lifestyle' or any other tab you have in mind, follow these exact steps for Dropdown Page 2
In case you want to create more than 2 tab titles in your menubar that need drop downs underneath them, please follow the steps for adding more drop down menus on this page of the instruction website: http://dutchladybloggerguide.blogspot.com/p/menu-bar.html
scroll down to paragraph: >>> ADDING MORE THAN TWO DROP DOWN MENUS TO THE MENUBAR
#3 - ADDING DROP DOWN PAGES UNDER THE TABS
The tab titles have now been created, it is time for the drop down pages. In this tutorial I will be adding two drop downs to the 'Beauty' tab and I am going to name them 'Hair' and 'Makeup'. In the end I want the menubar to work in such a way that if a reader clicks on drop down page 'Hair' they will be taken to a page that shows all my articles about 'Hair'.
In order to create a drop down that leads to a page with articles on one specific subject we need to start using labels in the blog articles. Labels work like keywords to describe the subject of a blog article. You can add as many labels as you wish to a blog article. If you are not yet familiar with adding labels to your blog post, please visit this page of the instruction website to find out how and where to add them: http://dutchladybloggerguide.blogspot.com/p/blog-page_10.html
Scroll down to paragraph: >>> ADDING LABELS TO YOUR BLOG POST
I want to create a drop down for the subject 'Hair', therefore it is important to use the label 'hair' in the blog articles that talk about hair stuff. Make sure that each time you use a label in a blog post, you write it exactly the same. So if you write your labels in lowercase, you have to keep doing this each time you add that specific label to an article.
>>> In case you already have articles with labels on your blog
If your blog is already up and running with articles that have labels on them, this is the way you connect one of your labels to a drop down:
• Go to a blog post that has the label in it that you want to turn into a drop down - in the case of this tutorial that is an article about hair with the label 'hair'
• Click on the label underneath the blog post
• It will take you to a page that shows all your articles about hair
• In your browser bar you will notice a link
• Copy this link
The next step is to connect this label link to a drop down page, so here we go:
• Go to Blogger Dashboard
• Select option 'Layout'
• Go to your menubar section and click on the 'edit' option of the 'Beauty' tab
• Now type a title for your drop down page into the title bar - in my case this is 'Hair'
• In the box underneath the title you can now paste the label link that you just copied
• Click on 'Add Link'
• And don't forget to save with the orange button
If you now go view your blog and hover over menubar tab 'Beauty', you will notice that drop down 'Hair' appears underneath it. When you click on it, it will take you to the page where only articles with the label 'hair' will be shown. You have just created your first blog category page!
For adding my second category called 'Makeup' I am going to repeat all the steps mentioned above. When I have added the title and link under the Beauty tab I can decide to place 'Makeup' above or under 'Hair' by using the little arrows. Don't forget to save again.
>>> In case you don't have any articles on your blog yet
In case you are just starting out with your blog and you don't have written any articles yet, you can easily start with an organized category menubar by creating all the labels you will be needing in just one blog post.
In the image below I have created a simple blog post with only one line of text (the purpose of this post is creating labels, so it's up to you if you want to write a real article or just keep it simple). I made sure that I added all the labels that I want to use as categories in my menubar. So I added labels for 'hair', 'makeup', 'travel' and 'family'.
Once that blog post is published you can follow the instructions I have in the paragraph above. You can click on each label underneath the blog post to get the link to that specific label.
SITUATION #2 - SINGLE PAGES IN THE MENUBAR THAT LINK TO SPECIFIC CATEGORIES
Sometimes all you need is one tab to link to a specific label. Not everyone has so many categories that they need drop downs. For example: if you would like to link your readers to all articles about your personal life and you have no other related subjects, you can add a link in your menubar that leads directly to all the blog articles that talk about personal stuff. This is how you do it:
• Click on the label that you want to work with. Under Situation #1 you read how this is done. In my case I click on the label 'personal' underneath one of my blog articles to copy the link
• Go to Blogger Dashboard
• Select 'Layout'
• Go to the menubar section and click on the 'edit' option of 'Pages'
• Click on 'Add an external link'
• Now type in the name you want to give to your menubar tab (in my case Personal) and paste the link you just copied
• Don't forget to save
• In the next popup screen you see an overview of your single pages, please confirm this configuration by clicking on 'save'.
If you now view your blog you will notice that there is a tab 'personal' in the menubar. It does not have any drop downs. When you click on it, it will take you directly to a page that only shows you the blog articles with label 'personal'.
Should you want to add more categories to your menubar in the future, whether these are in the form of a drop down beneath a menubar tabe or as a single page in the menubar, that is no problem at all. You can follow this step-by-step tutorial every time you decide to add a new category to your organized menubar.
FAQ & TROUBLESHOOTING FOR THE CATEGORY MENUBAR
Question #1 - I have a lot of blog articles but never used labels on them, now what?
This is going to be a bit of work for you, but you can still have that clean, organized category menubar of your dreams. You will have to 'edit' each blog article separately and add labels to them. Once the labels are added to the old blog articles, you can follow the instructions above for an already existing blog.
Question #2 - I added a category to the menubar but not all blog articles with this label show up
Your menubar is working, but when you click on a category (for example category 'makeup') not all blog posts with this label show up. In this case you need to check if you have written the label name 'makeup' the same way each time you added it to a blog post. It could be that you sometimes typed 'Makeup' or 'make up' or 'make-up'. Make sure that a label is written exactly the same way each time you add it to a blog post. Only then will all articles show up under a category page.
Question #3 - I also would like my tab titles to point to a label, can this be done?
In the tutorial I showed you how to create a tab title (Beauty) and add two drop down categories (Hair & Makeup). Both drop downs are connected to a label, but the tab title is not clickable. It is just a title. You wonder if you can make the tab title clickable too, maybe by adding the label 'Beauty' to it.
Well, I'm sorry to disappoint you here, but that is just not possible on my templates.
Question #4 - I am not tech savvy, can you setup my menubar for me?
I completely understand that even with the step-by-step tutorial above, setting up this kind of category menubar can be a bit too much to ask of some people. Don't worry, you're not stupid. We all have our own talents and specialties, and yours are just in another area.
You can hire me to setup the menubar for you. The only rule is that you are using one of the templates that are available in my Etsy shop. I can't install this type of menubar on someone else's template. It is important that you can present me with a clear structure of how you want your menubar to look (single pages, tab titles & drop down labels). Please contact me via Etsy if you need my help.