If you think that you need to make some changes in the code or the above button is not working for you then you may use this method.
Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.
<style>
#abt-search-btn {
background: none repeat scroll 0 0 #359BED;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
Now save the widget and save the template. If you want to increase/decrease the text box width change 160px with your desired width.
