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. Before 2 years, our previous admin Mr. Ajaya Gajurel wrote a post on "Creating Custom Navigation Bar for Blogger". You can see it here. So, I'm not going to describe more about it. 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="Smasher Menu"><span>Home</span></a></li>  
           <li><a href="2nd Link" title="Smasher Menu" class="current"><span>About Us</span></a></li>  
           <li><a href="3rd link" title="Smasher Menu"><span>Services</span></a></li>  
           <li><a href="4th Link" title="Smasher Menu"><span>Our Work</span></a></li>  
           <li><a href="5th link" title="Smasher 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 Smasher 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 Smasher 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;
If you guys have any problems regarding this topic, you can comment below;
Regards,
Nischal Khanal

Share this

Related Posts

Previous
Next Post »

8 comments

comments
Anonymous
May 18, 2015 at 2:26 AM delete

Nice Tutorial. It helped Me a lot
Visit my site:All Tricks

Reply
avatar
February 19, 2016 at 2:52 AM delete

Great and Very useful article..Am got your information i will try to optimize my blog.Keep Sharing..Am wait for your new Article..

Web Design Services Bangalore | Web Development Services Bangalore

Nexevo Technologies Blog: Top Web Design Company Bangalore | Web Designing Firm Bangalore

Reply
avatar
October 12, 2016 at 2:56 AM delete

These is an useful information update the new resources like this!!!!!

Reply
avatar
March 10, 2017 at 1:41 AM delete This comment has been removed by the author.
avatar
March 10, 2017 at 1:48 AM delete This comment has been removed by the author.
avatar