Add Clickable Tabs Style Navigation Bar for Blogger

In web design, Navigation bar is very important.Because It helps our visitors navigate our site easily to find important pages and articles.However There have lot of navigation bars.We have to choose good and relevant navigation bar for our blog.First figure-out what type of menu list do we need.Bloggertrix.com provided lot of navigation's bars.Just check Menu Bars under categories.
You can copy paste any code and modify blogger navigation bar to suit your needs.

In this tutorial im gonna explain about how to add Add Clickable tabs Style Navigation bar for blogger. So this is a different menu style.It allow to add more links to this clickable tabs navigation bar.However just have a look demo page.You can get a idea about it very well.Let see, how to add this for blogger.

Demo

Some of stylish navigation bars.
           Css Icon Hover Effect Navigation Bar For Blogger
           Css3 Dark Blue Navigation Bar For Blogger
           Css3 Navigation Bar With Google Custom Search Box
           Get All Navigation bars

How to Add Clickable Tabs Navigation Bar for Blogger

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find ]]></b:skin> and add below code just above it

/* The CSS Code for the menu starts here bloggertrix.com
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
white-space:nowrap;}
#bt_tabmenu li p {border-radius: 0.5em 0.5em 0 0 ; }
#bt_tabmenu li ul li:last-child a {border-radius: 0 0 0.5em 0.5em ;}
#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bt_tabmenu > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bt_tabmenu li a {box-shadow: 0px 3px 10px -5px black;float:right;}
#bt_tabmenu p {position:relative;height:1.6em;}
#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bt_tabmenu p:focus:after {content:'';}
#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}
#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
#bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
#bt_tabmenu ul ul a {margin-left:-9999px;}
#bt_tabmenu ul ul li a:focus {margin-left:19998px;}
#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bt_tabmenu ul li a:focus.fermoir + ul {
margin-left:10001px;}
#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}

5. Go to blogger Layout
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below code.

<div id="bt_tabmenu">
 <li> Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>

 <li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>

 <li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>
<li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>

 <li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
 <ul>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 <li><a href="#" tabindex="0" >List</a></li>
 </ul>
 </li>
</div>

Replace # with your links. and social profile as well.

8. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Add Clickable Tabs Navigation Bar. Just leave a comment.I will help to you.