CSS Stylish Menu Bar for Blogger

Rate this Post:

{[['

']]}

Here is a simple design of Horizontal Menu Bar for Blogger. You have not to struggle with code to add this menu bar. Just copy the following code and paste in HTML Widget and you are done. :)
See the demo Here;

You Just have to follow the Simple Steps,

Login to Blogger

Layout / Add gadget

Select HTML / JavaScript

Paste the following code:

<style>
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{float:right;background-color:#2b5385;background-image: -moz-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -ms-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -o-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4488dd),color-stop(100%,#2b5385)); background-image: -webkit-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: linear-gradient(to bottom,#4488dd 0,#2b5385 100%);border-bottom:1px solid #112136;border-top:4px solid #1a3352;height:45px;width:100%;margin:0 auto; padding:0 auto;text-shadow:1px 1px 2px #112136}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{border-left:1px solid #1a3352;border-top:4px solid #112136;color:#fff;float:left;font-size:12px;line-height:20px;margin-top:-4px;padding:3px 10px;text-align:right;transition:all 600ms ease-in-out;-webkit-transition:all 600ms ease-in-out;-moz-transition:all 600ms ease-in-out;-o-transition:all 600ms ease-in-out;-ms-transition:all 600ms ease-in-out;}
.menuhorisontal li a span{color:#b6d5fd;display:block;font-size:10px;font-weight:400;}
.menuhorisontal li a:hover {background:#112136;border-top:4px solid #4488dd;}
</style>
<div class='menupic'>
<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home <span>My Frontpage</span></a></li>
<li><a href='#'>Index<span>Sitemap</span></a></li>
<li><a href='#'>Contact Us<span>Email Us</span></a></li>
<li><a href='#'>Sample 1<span>Sample Page</span></a></li>
<li><a href='#'>Sample 2<span>Sample Page 2</span></a></li>
<li><a href='#'>Sample 3<span>Sample Page 3</span></a></li>
</ul>
</div>
</div>