How to Add Custom Menu Bar / Navbar/ Navigation Bar on your Blog Site

How to Add Custom Menu Bar / Navbar/ Navigation Bar  on your Blog Site

It's very helpful and useful tips. It also very Attractive  Menu Bar / Navbar/ Navigation Bar . You can use it very easy. Some people request me for nice Menu Bar / Navbar/ Navigation Bar  for their Blog Site , so that today I Share It , This widgets is Awesome .

I hope This widgets help to you and you like this widgets. You can add Dorpdown menu. 

Now Follow this instruction :

Step 1:  Go to your blogger Dashboard  and Click Template 

Step 2: Then Click   Edit HTML

Step 3: press  Ctrl+F  & Search

    

          <b:skin>… </b:skin>

Step  4: Replies it with this below Code

         

/* Spacing & Border of First Link in Navigation */

.tabs-inner .section:first-child ul {

margin-top: 0px;

border: 0 solid #eeeeee;

}

/* Background & Border of Navigation */

.tabs-inner .widget ul {

background: #999999;

border: 0px solid #eeeeee;

text-align: center  !important;

}

/* Font, Colour & Border of Links */

.tabs-inner .widget li a {

font: normal normal 14px Arvo;

color: #333333;

border: 0px solid #ffffff;

}

/* Font & Colour of Rollover Links */

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #eeeeee;

background-color: #ffffff;

text-decoration: none;

}

/* Centre Navigation */

.tabs .widget li, .tabs .widget li{

display: inline;

float: none;} 

19Mar2016

Step 5:  Now go to Template -> Customize -> Advanced ->Add CSS

    #staticknavbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

Now Click  Apply to Blog

Then 

Step 6:   Go to your blogger Dashboard  and Click  Layout

Step 7:  Now  Add a  new Widget Like   HTML/JavaScript  on your Header widget.

Step 8: Now Copy this Below Code and Pasted this Code  on       

                    this  Widget

<!-- begin navigation menu -->

<div id="staticknavbar">

<ul>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a>

    <ul>   

       <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

       <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

   </ul>

</li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

</ul>

</div>

<!-- end navigation menu -->

19Mar2016