There are many ways to approach navigation on your website and they all have their pros and cons. We have the top horizontal navigation bar, which can limit the number of links you can have before you have to resort to sub menus which, in my opinion, aren’t the best — but if you’re only looking to keep a couple of items in your navigation bar, this could be the one for you. Another approach is the vertical sidebar menu, but a drawback of this approach is that users can become overwhelmed when sub menus start popping out from all over the place. Finally, there’s the tab bar navigation system – the problem with this approach is that it takes a lot more time to design but if you design it well, boy is it good.
How to add it to blogger
1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
2. Copy the HTML link and paste it inside the content box.
/* Old */
.old {
width: 960px;
height: auto;
}.old ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}.old ul li {
float: left;
list-style: none;
}.old ul li a {
font: bold 12px/100% "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
padding: 11px 35px;
text-decoration: none;
color: rgba(0,0,0,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background: -webkit-linear-gradient(top, #cacaca, #848484);
background: -moz-linear-gradient(top, #cacaca, #848484);
background: -ms-linear-gradient(top, #cacaca, #848484);
background: -o-linear-gradient(top, #cacaca, #848484);
background: linear-gradient(to bottom, #cacaca, #848484);
}.old ul li a:before {
border-left: 1px solid rgba(255,255,255,.1);
content: "";
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}.old ul li a:after {
border-right: 1px solid rgba(255,255,255,.1);
box-shadow: 1px 0px 0px rgba(0,0,0,.5);
content: "";
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}.old ul li:last-child a:after {border: none; box-shadow: none;}
.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}.old ul li a:hover {
background: -webkit-linear-gradient(top, #929292, #535353);
background: -moz-linear-gradient(top, #929292, #535353);
background: -ms-linear-gradient(top, #929292, #535353);
background: -o-linear-gradient(top, #929292, #535353);
background: linear-gradient(to bottom, #929292, #535353);
}.old ul li a:active {
-webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
}<div class="old">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
You can apply this not only to navigation bars but also to buttons that ask for Download files or take users to social network pages.
To rename the category, simply replace Home with your own text. As for the link, just replace # with the Page intended URL. Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 
