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;http://2.bp.blogspot.com/-FtO2J6KAs7k/UPlml1RPeAI/AAAAAAAAIqg/fvFFp8tZKaU/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://4.bp.blogspot.com/-r3hQY1oZaYE/WTjhxEGy4SI/AAAAAAAAAQ0/MQiAEZq2aAQAeHcX-8nxcXKNSJENZ93TACLcB/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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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://1.bp.blogspot.com/-0u36SIESpB4/WLC4mezGXMI/AAAAAAAARfo/Xk9ywQGRSrgZ8xjm-UJsM-Dl4lngSnaMwCLcB/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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;http://1.bp.blogspot.com/-BovAoLCnF-0/USD0wpiUuCI/AAAAAAAAJLs/k5hV0LupT3E/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