How to ADD SIMPLE CSS3 MENUBAR FOR BLOGGER

-->

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2: Go to >> Dashboard>> Design >> Add a Gadget >> Html/Javascript
and paste this code

<style>  .navbox {
 position: relative;
 float: left;
}

ul.nav {
 list-style: none;
 display: block;
 width: 200px;
 position: relative;
 top: 100px;
 left: 100px;
 padding: 60px 0 60px 0;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQoJrC8-VzOS3dnYvvsh7IDlkCVhEaEvhIemEwNtoXxmqXM2dAALMNB73nBvm3dPq2Lj8ZL4Ok1tibW7neNRe4s1JJLIqdyzRqIdU9xAWqzxB9hR6uhc2UrwdOh6oPvfW2ibnk7MvFq49/s1600/shad2.png) no-repeat;
 -webkit-background-size: 50% 100%;
}

li {
 margin: 5px 0 0 0;
}

ul.nav li a {
 -webkit-transition: all 0.3s ease-out;
 background: #cbcbcb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtyaGY4SejhDqjurQtowBuYDB8Anf_0pFeeZ7d3kSCFzBuwVwX2LFy9THWLGQn-SEi8kYSXaRf0AxGLjdjBzMGwLQiCDht8wbPsdq_qs8S2Ubr0QeJhtevnkZHh2Ok1NA_ok-rEI0WWkr/s1600/border.png) no-repeat;
 color: #174867;
 padding: 7px 15px 7px 15px;
 -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
 width: 100px;
 display: block;
 text-decoration: none;
 -webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
 background: #ebebeb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtyaGY4SejhDqjurQtowBuYDB8Anf_0pFeeZ7d3kSCFzBuwVwX2LFy9THWLGQn-SEi8kYSXaRf0AxGLjdjBzMGwLQiCDht8wbPsdq_qs8S2Ubr0QeJhtevnkZHh2Ok1NA_ok-rEI0WWkr/s1600/border.png) no-repeat;
 color: #67a5cd;
 padding: 7px 15px 7px 30px;
}

Your Ad Here

</<span class="end-tag">style</span>>

<<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"navbox"</span>>
<<span class="start-tag">ul</span><span class="attribute-name"> class</span>=<span class="attribute-value">"nav"</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">XHTML</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">C++</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Mootools</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">HTML5</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">CSS</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">jQuery</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Ajax</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">PHP</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Perl</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
</<span class="end-tag">ul</span>>
</<span class="end-tag">div</span>>

Save It.Its Easy...