Add A search Bar into your BLog

How to add search bar in your blog This is very important to your blog visitor easily find post its make your blog Friendly If you want to add search bar blogger This is a simple go to blogger account>layout>widget>search bar
but this search bar some time problem in search so i have a beautifull search bar for you to add this search bar

• go to blogger account
• go to layout
• add a gadget and add Html jave script
• in content add this code and save 
• it and check your blog
• 
  

 <style>
#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/AVvXsEgEk_Ws5oX89xBvlOBKl2b6eGJDpQ_8Z_VnnKtpTwA1OcIBeAciED0xqNdmZWjxg92RDu82cfnVSO2D9kYxcsZIy2NjTYz4UU2TsIu7G3wYUpt1N9qmlTxuaoNcZAayt_Q0oqKQh9kSMFaw/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: 0px;
    padding: 9px 0px;
    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>