Create Custom Navigation Bar For Blogger

; A navigation menu is highly required organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS.  Just I will be telling you that they will work as a buttons for bloggers. When we click on any of them, it redirects to the specified URL of it.

Follow My Steps on Adding Custom Navigation Bar;

• Go To Blogger Dashboard
• Click On Add A Gadget Just Below Your Blogger Header (Because We will be showing it in the top of our blog)
• Click On HTML/Javascript 
• Paste The Below Code there;

 <div id="tabs24">  
      <ul>  
           <li><a href="1st link" title="Bishal Blog Menu"><span>Home</span></a></li>  
           <li><a href="2nd Link" title="Bishal Blog Menu" class="current"><span>About Us</span></a></li>  
           <li><a href="3rd link" title="Bishal Blog Menu"><span>Services</span></a></li>  
           <li><a href="4th Link" title="Bishal Blog Menu"><span>Our Work</span></a></li>  
           <li><a href="5th link" title="Bishal Blog Menu"><span>Contact Us</span></a></li>  
      </ul>  
 </div>  

• Change 1st Link, 2nd Link, 3rd Link, etc with your respective links.
• Change Home, About Us, Services, Our Work, Contact us, etc with the text to appear in the button.
• Save it!

Now, we have added the links. But it is incomplete and looks very very simple. Now, let's stylize the bar. Follow My Steps To Stylize the navigation bar;

• Go To Blogger Dashboard And Select Template And Click On Edit HTML
• Then Search for This Code inside the HTML Codes: ]]></b:skin>
• Now Just Paste This below code before/above ]]></b:skin>

 /* ---------------------- Start Bishal Blog's Navigation Bar ---------------------- */  
 #tabs24{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}  
 #tabs24 ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}  
 #tabs24 ul li{display:block;float:left;margin:0 2px;}  
 #tabs24 ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}  
 #tabs24 ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}  
 #tabs24 ul li a:hover{color:#fff;}  
 #tabs24 ul li a:hover span{display:block;cursor:pointer;}  
 #tabs24 ul li a.current,#tabs24 ul li a.current:hover{color:#894d12;background:transparent url("images/time2bed_left-ON.gif") no-repeat top left;}  
 #tabs24 ul li a.current span{background:transparent url("images/time2bed_right-ON.gif") no-repeat top right;height:43px;}  
 /* ---------------------- END Bishal Blog's Navigation Bar ---------------------- */  

• Save Your Template
• Check Your blog

Now, we have made a custom navigation bar for blogger. The final work in your blog looks similar to this;

Unknown

Author & Editor

Welcome To Bishal's Blog And Let Me First Introduce Myself. I’m Bishal Bhandari From Nepal And I Manage Bishal's Blog. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 16 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet, Loves Visiting New Places And I Like To Make New Friends From Around The World And Love To Share My Knowledge. Here At Bishal's Blog, I Share Everything With All Visitors, Subscribers And Lovers Which I Have Learned Over The Time, And In Last Few Years.