Helf India

How to Customize Menu Bar in Blogger | Step By Step

Today in this post “How to Customize Menu Bar in Blogger | Step By Step”, I am going to tell you how to Edit/Customize the menu bar in the Blogger Blog.

How to Customize Menu Bar in Blogger  Step By Step

The better the blog looks, the more visitors will like that particular blog.

The visitor almost takes interest in the template, theme, looks the design of a blog.

We use a lot of templates to give our blog a good look, but just by changing the template, the look of your website will not get a bit better.

For this you will have to add a better menu topic, categories, widget to your blog.

You must have added the widget.

But in the menu bar of your blog, you have to have the knowledge of the blogger’s coding to select the topic of your choice.

Can I do the design with coding in Blogger Blog?

 

Yes, you can.

The coding language of Blogger is very simple, you only need to apply a little portion of your brain.

Once you learn the blogger’s coding, you will find it easy to add/remove/change/customize/edit anything in the blog menu bar, or anything in blogging where coding language applies.

If you want to learn the coding language of blogger do, read the method that I am telling you here, carefully understand and follow my step by step guide.

How to add Topic in Menu Bar?

1. Go to Blogger Dashboard of the blog and click on Template >> Edit HTML.

2. Now search for any of those topics which are already present on the menu bar of your blog.

3. The coding of the topic in the blogger template will be something like this.

<li><a href='#'>Blogger</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Blogging</a></li>
<li><a href='#'>contact Us</a></li>

4. Now edit it and set the topic of your choice, like if you want to set the topic of your choice instead of Blogger, then remove Blogger and write the topic of your choice and add the URL instead of ‘#‘ in front of that topic.

Example:- Label

<li><a href='https://www.yourblogurl.com/search/label/Designing'>Designing</a></li>

We have entered the URL of the Designing label for the Designing topic here.

Now whenever anyone clicks on this topic, he will see the posts of your blog which you have added in the Designing label.

Example:- Pages

<li><a href='https://www.yourblogurl.com//p/about-us.html'>About Us</a></li>

You create any page and set its URL in place of ‘#‘ and write the name of your page instead of About Us.

5. Similarly, you can set the topic of your choice in the blog menu bar, after editing, the coding will be like this.

<li><a href='https://www.yourblogurl.com/search/label/Blogger'>Blogger</a></li>
 <li><a href='https://www.yourblogurl.com//p/about-us.html'>About Us</a></li>
 <li><a href='https://www.yourblogurl.com/search/label/Sitemap'>Sitemap</a></li>
<li><a href='https://www.yourblogurl.com/search/label/Blogging'>Blogging</a></li>
<li><a href='https://www.yourblogurl.com//p/contact-us.html'>contact Us</a></li>

I hope now you can easily set the topic in the blog menu, now we will learn to add categories in the blog menu bar.

What is the category in Blog Menu Bar?

When we move the mouse over a topic on the menu bar, the menu bar gets elaborated below.

There are some more topic shows in it, this is called the menu bar category, with the help of this we can set many topics in our blog.

It is very easy to add a category topic in the menu bar.

Use this code wherever you want to add a category topic in the menu.

You can also remember this coding so that there is no need to seek help.

<li>
<a class='ai' href='#'>Category</a>
<ul>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
<li><a href='#'>Category 4</a></li>
<li><a href='#'>Category 5</a></li>
</ul>
</li>

1. Now you have to add this code between the topic of the code menu bar where you want to add it and according to the way I have mentioned above, according to the topic option.

If you have the category option behind blogging and contact Us. You can add like this.

 <li><a href='#'>Blogger</a></li>
     <li><a href='#'>About Us</a></li>
     <li><a href='#'>Sitemap</a></li>
     <li><a href='#'>Blogging</a></li>
    <li><a class='ai' href='#'>Category</a>
    <ul>
    <li><a href='#'>Category 1</a></li>
    <li><a href='#'>Category 2</a></li>
    <li><a href='#'>Category 3</a></li>
    <li><a href='#'>Category 4</a></li>
    <li><a href='#'>Category 5</a></li>
    </ul>
    </li> 
    <li><a href='#'>contact Us</a></li>

2. The code of the category will already be in the template of your blog, if the category code is not in your blog, then you can also use the code mentioned by us.

If you make any mistakes while setting the menu.

You will get error when you click on the save template tells you that you have made mistakes.

So you follow the blogger’s coding well.

Keep in mind that even if one of these codes is left > , / ” ‘, it will show an template error.

If you still have any kind of problem-related to blogging or any other queries, then do let me know in the comment, I will be happy to assist you.

Also, Read Our Other Posts:

I hope now you can customize/edit the menu bar of your blog with the help of our post “How to Customize Menu Bar in Blogger | Step By Step”, if so, then do share this post on social media.

Somehow, for someone on social media, it will be helpful.

Leave a Comment

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