pkcompany

Follow simple and easy step to addingt this stylish menu to your blog --->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

#hb{height:42px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#nav-element{margin-left:5px;width:1000px; margin-top:-24px; padding:0}
#nav-right{float:right; display:inline; width:200px; padding-top:9px; padding-right:3px}
#tsrc-m #src-m{margin-top:0px;margin-left:-30px; background-color:#FFFFFF; border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{margin-top:-3px;width:176px;}
#src-m input{border:0; background:none; color:#777}
#src-m{border:1px solid #999; height:20px; width:200px; padding-top:2px; background:#f6f4f4; }
#src-m input{border:0; background:none; color:#777}
#nav-left{float:left; display:inline; width:750px; padding-left:0; padding-top:11px} #nav{clear:both; margin:0 auto}
#nav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#nav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:30px; display:inline;}
#nav ul li a, #nav ul li a:visited{border:1px solid #111; margin:0 1px 0 0; float:left;margin-top:0px; padding:8px 10px; text-transform:uppercase; color:#fff; font-weight:bold; font-size:11px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJZTqAOvBm-Tw73NUdROh0WOMK5hoYawgUSG7sTnogw9lCyycOGBThw-iYXJzRKV_T9A2kJLkF7S3Jmw55Ts39eKCEgrjU5_zAAtoGlMxxQ-hDDpYQJ4Vjkcq9ycg9U6ltYpKsWdjA9c/s320/menubg.png) top left repeat-x; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#nav ul li a:hover{border:1px solid #111; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iL6qxSasNlC-XtgD-9e0JeYoPDm6BuOUeegDnzfHQqwyIwXHwt2Nu7_7EBtjcztNqr-fz355hMCpZC9ey0zw0HDDNMBqFIyOFiCaqC8lFZfSmh1PXeMifBPuJOoWQ2fvvlgABk3YwBY/s320/hover2.png) top left repeat-x}
#nav ul li a.current, #nav ul li a.current:visited,a:hover {text-decoration:none;} a img {border-width:0;}
#search{width:249px;padding:2px 2px;background:#000;border:1px solid #2f2e2e;float:right;margin-right:50px;height:26px;margin-top:0;display:inline}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:175px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 100% "Tahoma",Arial,Helvetica,sans-serif;color:#fff;float:left;background:#000;display:inline}
input#searchsubmit{float:left;display:inline;margin:0 0 0 0;height:26px;background:#b80606;color:#fff;border:1px solid #222}
#headerdatesec{color:#fff;height:15px;width:200px;float:left;margin:-3px 0 0 0;padding:0 0 5px 10px;text-transform:uppercase;font-weight:normal;font-size:11px}
#topbar{height:23px;margin-bottom:0;margin-top:-150px;background:#333333 url() repeat-x;font-family:Century gothic,Arial,Tahoma,sans-serif}
#topbar ul{float:right;display:inline;height:23px;padding-right:10px;margin:0 0}
#topbar ul li{float:left;margin-left:20px;display:inline;height:20px}
#topbar ul li a:link,#topbar ul li a:visited{height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDylihEDeEUVYPh4k9HEfJzlH8bsN_BYOUPPPH98NHMfxnCjqiVKnpet4pKIk0_ChPwUgSQ3Wx6LhqvhR0Efa69mWFdou9pF4YkWcScxP7jH0iT-v8hB1Bojss9DSBAmmHgjn8X2xRm98/) no-repeat;background-position:left;padding-left:20px;line-height:25px;font-size:13px;font-weight:normal;color:#AFAFAF}
#topbar ul li a:hover{color:#afafaf}

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here --->>> Page Element.

* Click in add Gadget which is in your blog sidebar.

* When open new window choose HTML/javascript code from list.

* And when open new blank box copy below code and paste in blank box.

<div id='hb'>
<div id='nav-element'>
<div id='nav-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiSAVI_sUDtKtDlrQkyR_Jrj0xuEPdysLhtUsG03Lm9Hf9ZjkKFIy3rJRrbJgwMaQ8x3yfuzazwOuIV3fmW5CLZlzKxls3wVzdbcHwhiO3EFGMT2diZMpMylU7NHD0_U4IUYX588w8l1xq/s1600/search.gif' style='border: 0pt none; vertical-align: top; padding-top: 3px;' type='image'/>
</form>
</div>
</div>
</div><div id='nav-left'>
<div id='nav'>
<ul>
<li class='current'>
<a class='current' href='ADD HERE YOUR BLOG URL'>HOME</a>
</li>
<li>
<a href='TAB1 URL HERE'>TAB5 TITLE HERE
</a>
</li>
<li>
<a href='TAB2 URL HERE
'>TAB2 TITLE HERE
</a>
</li>
<li>
<a href='TAB3 URL HERE
'>TAB3 TITLE HERE
</a>
</li>
<li>
<a href='TAB4 URL HERE
'>TAB4 TITLE HERE
</a>
</li>
<li>
<a href='TAB5 URL HERE
/'>TAB5 TITLE HERE</a>
</li>
</ul>
<script language='javascript'>setPage()</script>
</div>
</div>

* Note:-  Remove Highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and after saving this element drag and drop this element below header and again click to save button now you are done.