How To Add Click Style Tabs Navigation Menu Bar For Blogger
1. Log in to blogger account2. Now select Template
3. Now Click EDIT HTML Button
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
#bloggersstand_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;6. Go to blogger and click Layout
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;}
#bloggersstand_tabmenu li p {border-radius: 0.5em 0.5em 0 0 ; }
#bloggersstand_tabmenu li ul li:last-child a {border-radius: 0 0 0.5em 0.5em ;}
#bloggersstand_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bloggersstand_tabmenu > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bloggersstand_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bloggersstand_tabmenu li a , #bloggersstand_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;}
#bloggersstand_tabmenu li a {box-shadow: 0px 3px 10px -5px black;float:right;}
#bloggersstand_tabmenu p {position:relative;height:1.6em;}
#bloggersstand_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bloggersstand_tabmenu p:focus:after {content:'';}
#bloggersstand_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;}
#bloggersstand_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bloggersstand_tabmenu ul a:focus , #bloggersstand_tabmenu p:focus + ul li a {margin-left:9999px;}
#bloggersstand_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;}
#bloggersstand_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
#bloggersstand_tabmenu ul ul a {margin-left:-9999px;}
#bloggersstand_tabmenu ul ul li a:focus {margin-left:19998px;}
#bloggersstand_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bloggersstand_tabmenu ul li a:focus.fermoir + ul {
margin-left:10001px;}
#bloggersstand_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;}
#bloggersstand_tabmenu ul li .fermoir:focus , p#bloggersstand_tabmenu {color:white;}
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code
<div id="bloggersstand_tabmenu">*Change All # With Your Links.
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a></p>
<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><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<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><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<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><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<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><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<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>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Amazing Add Click Style Tabs Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.