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">  
           <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>  

  • 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;

Share this

Related Posts

Next Post »


May 18, 2015 at 2:26 AM delete

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

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

October 12, 2016 at 2:56 AM delete

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

March 10, 2017 at 1:41 AM delete This comment has been removed by the author.
March 10, 2017 at 1:48 AM delete This comment has been removed by the author.
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.

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.

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.

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.

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

November 28, 2017 at 1:39 AM delete

The website is looking bit flashy and it catches the visitors eyes. A design is pretty simple .

November 28, 2017 at 9:24 PM delete

Interesting post! This is really helpful for me. I like it! Thanks for sharing!
office 2010 kaufen

December 3, 2017 at 10:08 PM delete

Thanks For Your valuable posting, it was very informative

December 6, 2017 at 1:32 AM delete

Your website content nice nice and interesting to observe.
jobbörse Neunkirchen

December 23, 2017 at 10:55 AM delete

Very nice. Posts shared useful information and meaningful life, I'm glad to be reading this article and hope to soon learn the next article. thank you

January 27, 2018 at 4:07 AM delete

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

March 2, 2018 at 1:22 AM delete


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.

Maestro Infotech,
Web Design Company Bangalore

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

April 19, 2018 at 3:10 AM delete

I read this article. I think You put a lot of effort to create this article. I appreciate your work.
Dissertation Writing Services

June 26, 2018 at 10:14 PM delete

I like its sharing. My website is the best provide Web service. Thanks you
website designing company in India

July 13, 2018 at 6:48 AM delete

This is a heavenly article, Given such an extraordinary measure of information in it, These kind of articles keeps the customers eagerness for the site,


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

August 7, 2018 at 3:14 AM delete

Lifestyle Magazine India; Lifestyle is a elite magazine circulated to the elite at page3 parties. Lifestyle Magazine also circulated to the elite at clubs, lounge bars etc.
Lifestyle Magazine

August 7, 2018 at 3:15 AM delete

I like its sharing. Thanks you. My spingurus is the best audio engineering course provide.
sound engineering courses in Delhi

August 10, 2018 at 2:51 AM delete

Nice post.Thanks for sharing this post .I really appreciate the kind of topics you post here.
manufacturing erp software in chennai