Blogger Blog Me WordPress Jaisa Menu Kaise Add Kare.

 

Share

You must have seen in many websites that there is a menu in the header area of ​​the site. There are some important links in that menu, which makes it easy for visitors. In this post, we will tell you only about adding menus to the blog. If your blog is in blogger and you want to add menu to your blog, then read this post, we are going to tell you about adding stylish menu bar here.

There are many bloggers on the Internet and everyone wants the design of his blog to be the best. For this, people add various widgets to their blog. It is true that to bring good traffic to the blog, its design is very important. Because nowadays people focus more on the design of the blog. In a blog whose design is good, the visitors also have a heart to come.
Nowadays there are millions of Themes, Templates on the internet and its design is also different. But to give the blog a better and different look, we have to customize and design the template / theme by ourselves. Because thousands of people download the same template / theme from the internet and add it to their blog. So that's why if we have to design our blog better than all those other blogs then we have to design the theme / template from ourselves. To customize the template by designing it, you should have knowledge of coding languages ​​like HTML, XML, CSS. If you do not know the coding then you can get it designed from another developer. Bye the way, we are going to tell you about adding menu in this post. So let's know.

It is very important to add a menu to the blog. Because it contains some popular links of our blog and many people add categories too. This does not require visitors of our blog to wander around. Nowadays, many templates have already added menus. In this post, we are telling you about adding a menu like a wordpress blog. It is a stylish and responsive menu, which also works well in mobile devices.

We are telling you some simple steps below. By following the procedure given below, you can easily add the menu to your blog.

Step 1: First login to your blog and Themes -> Edit HTML Go to

Step 2: Now by pressing CTRL + F button Find and Add the code given below.

 

    

Title
Title
Title
Title
Title



    Menu 

Customize:

1. Paste the URL of the page or category in place of the URL in the above code.
2. Add title of page or category in place of title.
3. If you want to add more page or category then
   before that
4. Title
Add

Step 3: By pressing CTRL + F button ]]> Search for and]]> Let's add the CSS code below.

/ ********** Blogger Stylish & Mobile Menu By BloggingHindi.com ********** /
# nav-trigger {
    display: none;
    text-align: center;
}
# nav-trigger span {
    display: block;
    background-color: # 279CEB;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
}
nav # nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
# nav-main {
    background-color: # 279CEB;
    margin: 0px;
    float: left;
}
# nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
# nav-main li {
    display: inline-block;
    float: left;
    ont-family: & # 39;
    Open Sans & # 39;
    , sans-serif;
}
# nav-main li: last-child {
    border-right: none;
}
# nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
# nav-main a: hover {
    background-color: # 3AB0FF;
    text-decoration: none;
    color: #fff;
}
# nav-mobile {
    position: relatifve;
    display: none;
}
# nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: # ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px # cc0028;
}
nav # nav-mobile li: last-child {
    border-bottom: none;
}
nav # nav-mobile ul {
    padding: 0;
    margin: 0;
}
nav # nav-mobile a {
    display: block;
    color: # 29a7e1;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid # 00aeef;
    text-align: center;
}
nav # nav-mobile a: hover {
    background-color: # 111;
    color: #fff;
}
nav # nav-mobile li {
    display: block;
}
nav # nav-mobile {
    display: none;
}
/ * = Media Queries
-------------------------------------------------- ------------ * /

@media all and (max-width: 900px) {
    # nav-trigger {
        display: block;
    }
    # nav-main {
        display: none! important;
    }
    nav # nav-mobile {
        display: block;
    }
}

Step 4: Now you have added the css code. Now again press CTRL + F and Find, then Let's add the code below.

Step 5: Now Find and Add the code below.

Step 6: Now finally save the template.

Congratulations! You have added the menu to your blog. Now try visiting your blog once. If there is any problem then comment us.

---

I hope you liked this post and with the help of this post, you have added a stylish menu to your blog. If you have any question related to this post, then comment us and share this post in social media.