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 »

15 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
May 23, 2017 at 1:31 PM delete

Thank you for sharing such an informative news with us. Keep on sharing Contents like this. You can also share this content on various sites like the Automation Associates LLC site.

Reply
avatar
May 31, 2017 at 6:39 AM delete

The post is very informative. It is a pleasure reading it. I have also bookmarked you for checking out new posts. You can also share this valuable content on other platforms such as Blogspot, the famous Wordpress site, the innovative Tumblr site and also the sites like Medium and the famous Live Journal site.

Reply
avatar
May 31, 2017 at 6:53 AM delete

Thank you for sharing this information. Come back again for more interesting stuff like this post. You can share this informative post in Social Media sites like the worldwide famous Facebook, the all-time favorite Twitter and the most interesting Google Plus site, business site LinkedIn and also to the Infographic site Pinterest to generate more traffic to your blog post.

Reply
avatar
May 31, 2017 at 6:57 AM delete

I have analyzed your post. Excellent details you did here. I enjoyed reading your blog, and it is both instructional and enjoyable. Share this most interesting post in other sites like OS Business Opportunities, the innovative Asaim Japan site and also to the Jfissures site followed by Free Samples 411 and lastly to the sites like Johny Adams sites.

Reply
avatar
October 21, 2017 at 2:54 AM delete

Informative blog. I'll follow your steps to optimize my blog. Thanks for sharing.

Website Designing Company In Delhi | SEO Company in Delhi

Reply
avatar