headerimg

HOW TO ADD MENU BAR TO YOUR BLOG

How to add a menu bar to your blog
Have you ever wondered how to add a menu bar to your blog? It organizes all your posts into different categories. So here’s how to add a menu bar to your blog.

Before you do anything, you have to decide what categories do you want.For me, it is fashion and beauty, Recipes, Life and contact me.

Once you identify your categories. Go to your post and add that category name to that post labels. Don’t forget to use the exact same name as you use in the menu bar. For example, if you create a category called Recipes add the word ’Recipes’ to your post labels as shown in below.And don’t forget to save the changes.
How to add a menu bar to your blog

Then go to Layout
After the header, there is a link to ‘Add a gadget’ shown in the below image. Click that.
How to add a menu bar to your blog

Then in the oncoming window select pages
How to add a menu bar to your blog


In another window open your blog. Click on a blog post of a certain category.  For example, I opened my chocolate chip banana bread recipe post which I wanted to add to Recipe category. You can see all the labels you added at the bottom of that post.
If you want to make this yummy chocolate chip banana bread you can find it here.

How to add a menu bar to your blog

Click on the category name. As seen in the above image click the ‘Recipes.’ Copy the link of next coming web page.
How to add a menu bar to your blog

Then go to Layout->Edit pages -> +External links

In the following window Add your category name to the page title and add the link that you copied above to the web address. And save the link.  You have to repeat this for all your categories.
How to add a menu bar to your blog

Now let’s see how you add pages like ‘about me’ or ‘contact me’

Go to pages – > New page. Add the page you want and it will display with all the other pages you add. 
How to add a menu bar to your blog
You can drag and organize you list the way you want in Layout->Edit pages.

Now if you want to center your menu bar or want to remove the border around your menu bar follow below steps.

To center
go to layout -> Template Designer
Advanced->add css

place below CSS code.

.PageList {text-align:center !important;} .PageList li {float:none !important; display:inline !important;}

To remove border
go to layout -> Template Designer
Advanced->add CSS

place below CSS code.

.tabs-inner .widget li a, .tabs-inner .widget ul, .tabs-inner .section:first-child ul {border:none;}

Above code is not mine. I borrowed it from here

How to add a menu bar to your blog

There you go. You have a menu bar for your blog.








Tags: ,
Category: Blogging Tips, Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *