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.
Then go to Layout
After the header, there is a link to ‘Add a gadget’ shown in the below image. Click that.
Then in the oncoming window select pages
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.
Click on the category name. As seen in the above image click the ‘Recipes.’ Copy the link of next coming web page.
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.
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.
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
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
Advanced->add CSS
place below CSS code.
.tabs-inner .widget li a, .tabs-inner .widget ul, .tabs-inner .section:first-child ul {border:none;}