Custom menu bar for blogger with 3 ways how to create

Menu or navigation bar is an essential part of any website. Before going in depth let me explain a little bit about navigation bar. Menu bar includes important links about different categories and it exists below header section. Many webmasters use this navigation bar in side bar section of their blog/site. Behind these links all the published post of a certain category goes in that specific tag. In simple words we can say that these links are act like a folder where all pages interlink and be present. Arranging menu bar in good organized way is a sign to quality of a blog. Readers can find easily their interested content with the usage of navigation bar. So this is also a way to improve a blog/site reputation with build a huge readership.

Custom menu/navigation bar for websites

Why to customize menu bar:

If you are using blogger platform that you may be notice that bydefault blogger menu bar is not so much attractive. A user doesn’t show his concentration with blogger navigation bar. So in order to adding gorgeousness with giving a new glance to your blog plus snatching user’s attention towards more important material that is include in our site. While on the other hand if you are a professional web-master then you know that what importance a menu bar in a website has?

Also Read:

Customized blogger menu bar:

In this section I will teach you how easily you create a custom navigation bar for your blogs and other websites. Sufficient knowledge of basic (HTML) Hyper Text Mark up Language with skills of (CSS) Cascading Style Sheet you have required. If yes then good alternatively for today I will crate different types of custom menu bar for all of you guys with simple HTML. But giving a new charming look we use CSS. Blogger is a service where we customize each and every part of our template. In present tutorial we customize blogger menu bar section according to our preference. Just copy and all you’re wanted coding form here and put it in your website navigation section as you want. And enjoy a new customized navigation bar.

1. Rounded Corner

<style type=”text/css”>
.menu {
            font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;
}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            border-top-left-radius: 35px;
            border-top-right-radius: 35px;
            height: 45px;
    box-shadow: 0px 2px 4px #
            00FF00;
            border:1px outset #0C0;
            webkit-border-radius:30px;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
.menu ul ul {visibility: hidden;}
.menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
    <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                       

2. Green Border Effect:

<style type=”text/css”>
.menu {
            font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;
}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            height: 45px;
    border-right:#000 1px solid;
     
            box-shadow: 0px 2px 4px #0C0;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
   .menu ul ul {visibility: hidden;}
   .menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
    <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                                 

3. Simple Black Menu bar:

<style type=”text/css”>
.menu {           font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            height: 45px;
    box-shadow: 0px 2px 4px #
            00FF00;
            border-right:1px solid #000;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
  .menu ul ul {visibility: hidden;}
   .menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
     <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                               

Need Help:
In order to feel any type of trouble while adding this menu bar to your blogger template then feel free and just ask us. On the other hand if you feel that trhis tutorial is a way of new learning and customizing for others then. P.s. share it as you can. 

Leave a Reply