add beutifull menu to blogger

add beutifull menu to blogger
this is cool menu for blogger blog
to add this menu to your blogger blog
follow the below steps

Follow The Steps


Go to blogger

Select your desire blog


Click on {show with red mark in image]




Now select Layout



And click on Add gadget



Now select Html/javascript




in title write your widget title and paste code


Paste the below Code in html java script
and click on save

<style>
#Awkkhan-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:115%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
background-color: #210702;
background-image: url(http://1.bp.blogspot.com/-

wkCJWwWHkds/UUhg3QUJc5I/AAAAAAAAAWQ/wcE_CDOtVBw/s1600/gradient-

AWkkhan.blogspot.com.png);
background-repeat: repeat-x;
background-position: 0 -110px;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #33FF00;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover &gt; a {
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
background-color: #FFFFFF;
background-image: none;
background-repeat: repeat-x;
background-position: 0 -40px;
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0000FF url(http://4.bp.blogspot.com/-

jA1hbZg4Kvc/UeELLoS8DsI/AAAAAAAAAzw/JeAvlh7otl0/s320/croping.png)

repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover &gt; ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://4.bp.blogspot.com/-

jA1hbZg4Kvc/UeELLoS8DsI/AAAAAAAAAzw/JeAvlh7otl0/s320/croping.png)

repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child &gt; a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child &gt; a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: &#8220;.&#8221;;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
.style1 {color: #FFFFFF}
</style>

<div id='Awkkhan-Container'>
<ul id='nav'>
<li class='current'><a href='#'>Home</a></li>

<li><a href='#'>Blogger templates</a></li>


<li><a href='#'>Sms section</a></li>



<li><a href='#'>words of truth</a></li>

<li><a href='#'>Best topic</a></li>


<li><a href='#'>Blogger widget</a></li>



</ul>
</div>
<style></style>


just replace # with your link an d change the name



click on save and enjoy