Adding Attractive 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,

Share this

Related Posts

Previous
Next Post »

39 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
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
November 25, 2017 at 2:41 AM delete

Informative and impressive. Keep Updating
ssd festplatte

Reply
avatar
January 27, 2018 at 4:07 AM delete

Thanks for the great information. It would really useful for amazing contact form for a blog.

Reply
avatar
March 2, 2018 at 1:22 AM delete

Hi,

Thanks for sharing a very interesting article about Create Custom Navigation Bar For Blogger. This is very useful information for online blog review readers. Keep it up such a nice posting like this.

From,
Maestro Infotech,
Web Design Company Bangalore

Reply
avatar
April 16, 2018 at 4:47 AM delete

Thank you very useful in creating nav bar for our blogspot Embassy IT Solutions - Web development company in Bangalore

Reply
avatar
July 14, 2018 at 2:18 AM delete

This is a magnificent article, Given such an incredible measure of information in it, These kind of articles keeps the customers eagerness for the site, and keep sharing more ... favorable circumstances.

iPhone cases

Reply
avatar
October 18, 2018 at 3:53 AM delete

useful information for me.....as it contain relevant information....

http://aminorich.nl

animal feed supplements | veterinary products producer | poultry feed supplements | cattle feed supplements

Reply
avatar
November 15, 2018 at 9:31 PM delete

Thanks for sharing this blog, this blog is very helpful information for every one.

Reply
avatar
November 28, 2018 at 6:54 PM delete

Very Informative blog, Thank you for this Information.

Reply
avatar
December 3, 2018 at 9:20 PM delete

Most impressive Topic and Blog, this is very helpful Information. thanks for sharing.

Reply
avatar
December 12, 2018 at 1:05 AM delete

Very Informative blog, Thank you for this Information.

Reply
avatar
February 18, 2019 at 1:12 AM delete

Thanks for the article may be useful for everything

Reply
avatar
February 28, 2019 at 12:01 AM delete

Thanks, you guys that is a great explanation. keep up the good work in your granite blog.

Reply
avatar
March 12, 2019 at 11:45 PM delete

Awesome post keep sharing the information like this!!!


Piperr | Data cleansing services in india


Reply
avatar