In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3. HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.
How to add it to blogger blog
1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
2. Copy the HTML link and paste it inside the content box.
<style>
#org_menu {
position: relative;
margin: 0 auto;
clear: both;
width: 960px;
}
#org_menu:before {
content: "";
position: absolute;
left: -10px;
bottom: -9px;
z-index: 1;
border: 10px solid transparent;
border-right-color: #c50;
}
#org_menu ul {
display: block;
position: relative;
z-index: 2;
padding: .2em 30px;
margin-right: -2em;
list-style: none;
background: #f72;
font-family: 'Arial', serif;
font-weight:bold;
font-size: 16px;
line-height: 1;
color: white;
text-transform: capitalize;
border-radius: 0 9999px 9999px 0;
box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
content: "";
clear: both;
display: block;
visibility: hidden;
}
#org_menu li {
float: left;
position: relative;
}
#org_menu a {
display: block;
padding: .8em 1.4em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
color: white;
transition:.3s box-shadow, .3s padding;
border-radius: 9999px;
}
#org_menu a:hover,
#org_menu a:active {
background: rgba(0,0,0,.1);
color: #F90;
box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
}
#org_menu a:active {
background:white;
color: #eee;
padding: .5em .6em .3em 1em;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
box-shadow: 10px 6px 1px #c50 inset;
}
#org_menu:hover {
transform: rotate(720deg);
}
</style>
<nav id="org_menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>
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 
Enjoy..!!