Slider

Stylish Header Menu with Search Box for Blogger


 Login to your blogger account. go to your blogger Deshboard. Click on layout tab from left Sidebar and Click on Add a Gadget link. ( in the Header Area )

 Now  click on Add a Gadget


  After click on Add a Gadget link a pop-up Box will open now with many gadget list,choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.



 Select 'HTML/JavaScript' And Add the One of code given below
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="blog-bg" style="background: rgb(36, 39, 41); height: 210px; width: 1294px;">
<div style="margin: 0px auto;">
<br />
<header id="header" style="background-attachment: initial; background-clip: initial; background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimySadqbKYWFBRZcRBraPzZA-tFkMBz_IHUnikCGDyNTmX4BvbdwYoBEM0fiRo_zNLBgJ0igwo5GimB-tt0iHYo0PJVrPhRtuAy5i_NLuhZPGlUqlGSNi6INmKscQK2hSaxKdq06-qIcSP/s1600/final_bg.png&quot;); background-origin: initial; background-position: 26% 0px; background-repeat: no-repeat; background-size: initial; color: white; font-family: Verdana, arial; font-size: 11px; height: 120px; margin: 0px auto; overflow: hidden; padding: 0px; width: 1050px;"><div class="headerleft" itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization" style="height: 103px; left: 10px; margin: 0px; position: relative; top: 20px; width: 376px;">
<div class="headerleft section" id="headerleft" style="height: 103px; left: 10px; margin: 0px; position: relative; top: 20px; width: 876px;">
<div class="widget Header" data-version="1" id="Header1">
<div id="header-inner" style="background-position: left center; width: 450px;">
<h2 itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject" style="margin: 0px; padding: 0px;">
<a href="http://#/" style="color: white; display: block; font-size: 10px; margin: 0px; outline: none; padding: 0px; text-decoration-line: none;"><img alt="MyBloggerTricks" height="66px; " id="Header1_headerimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLU-otgaALG_2U7iFh47RNLowKRLeTOgPt9bqfsyVak8I5Krhpwv7Tn_r6FsvdbLIYGnSiklzZPss2BEIjvIQhJblvx6GRCcfm3BXBy7WsODViqTD1WdK-n_CaywlM4CYdHW9mBmKE14/s1600/abhwaai.png" style="border: none; display: block; height: auto; margin: 0px; padding: 0px;" width="240px; " /><span style="display: block; text-indent: -999em;">My Blogger Tricks</span></a></h2>
</div>
</div>
</div>
</div>
<div class="headerright" style="float: right; font-weight: 700; margin: -40px 0px 0px; padding: 02px 5px 0px 0px; width: 486px;">
<div class="headerright section" id="headerright" style="float: right; margin: -40px 0px 0px; padding: 02px 5px 0px 0px; width: 486px;">


<style type="text/css">
#searchbox{background: rgb(36, 39, 41); border: 2px solid rgb(144, 241, 40); box-shadow: rgb(42, 82, 0) 1px 2px 9px; color: white; font-family: oswald, arial, sans-serif; font-size: 13px; height: 28px; margin: 0px; overflow: hidden; padding-top: 7px; position: relative; text-align: center; text-shadow: rgb(0, 0, 0) 1px 1px 4px; width: 1323px; z-index: 9998; padding:10px 05px;width:450px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VClN9ympxKt6tQO9ErBK9mUhAl_nqIozjPkmoet3-o0Yqb28MaFgcxhQ1mhvOEyzEXu3_CBI_Ap66_4u-Ot5u-QHUKXbSILNj8-AmNlwGRxnwZLqci8Lct3-bc8yTqU5DKqwhkGsz5o_/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>


</div>
</div>
</div>
</header><nav id="Main-Menu" style="background-attachment: initial; background-clip: initial; background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMz7h5qSRbtAvThyphenhypheng4FhcrjyXH9ZA3zaVmUobyOEpwo8vmxYrpZRXcW9gnVN0nhUQOdRFG7vcBsTST0RgqrjDGrz9RSohc1fBFhsq0N6y_zakU92ghbo4WESgkBbvFgKzO8jBWI3srtrY/s1600/Menu_bg.jpg&quot;); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; color: #555555; font-family: Verdana, arial; font-size: 12px; height: 70px; margin: 0px auto; padding: 0px; width: 1018px;"><ul id="Main-nav" style="margin: 0px 0px 10px 15px; padding: 10px;">

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://abhwai.blogspot.in/p/contact_47.html" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-columns" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Widget</a></li>

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://abhwai.blogspot.in/p/contact_47.html" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-envelope" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Contact us</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Make%20Money%20Online" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-dollar" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding: 2px 7px 2px 4px; position: relative; text-shadow: none;"></span>&nbsp;Make Money</a></li>

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Social%20Media" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-search" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Seo</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Widgets" style="color: white;hover: #8fde62; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-edit" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;blog Design</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="#" style="color: white;hover:red; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-btc" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Blog Menu
</a></li>
</ul>
</nav>


 Now Click on save JavaScript you are done