How to add stylish search box code html css for blogger

How to add stylish search box code HTML CSS for blogger widget customized search bar 

In this blogger coding tips post you learn how to add many stylish search boxes to your HTML widget with CSS styling, you can use the following codes below as a starting point. This example includes a simple HTML CSS structure with a search input and corresponding CSS styles for basic appearance:

Step No 1:Adding HTML CSS Code

First copy the following Style code you like the most make sure you copy only one code Then Go to Blogspot.com Then >> Your Blog >> Layout >> Add Gadget/Page Element >>> HTML/JavaScript >>> then paste the code which is below >> Then Press Save Button And you are done

No1

 

                                                    <form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>  

 No2

<style type="text/css">

#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}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/AVvXsEgdTeBr7g3DZ6KZSjZqlvvzvSRqoNNW_m97hsTtwb5IOwFWiEIOOvBDk-SYFOBQg1qw-rBtvw0wjsGjEixV8jjE0OLaCVEzb92RXTG5ghx3wSJxF2AbFMPFKJmXkdDCyNfNmvQa6GhYxDU3/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>