Add Beautiful Search Boxes to Blogger / Blogspot

Add Beautiful Search Boxes to Blogger / Blogspot: Hi Friends do you know how many people search in your Blog and seeing a common search box so change your search box with Beautiful Search box. However, the search button may be omitted as the user may press the enter key to submit the search, or the search may be sent automatically to present the user with real-time results.

How to change your Search Box in Blogger. Follow the Below steps to change your Search box


Goto  Dashboard >>>Layout>>>Add Widget>>>Select html/Javascript  and enter Below Codes

1.

<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 {
    border: 1px solid #d2d2d2;
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    width: 186px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type to search "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

2.

 <style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs0ZmPZxF3UstRLlqbPpoQJu3j7gut_qRAR9V_OltlqauFICKxPYiNaZ7kuuyVQ1EeT5uBakDQTP57qyX4GavXw9efowfSxR6BIi6Zz3ZKxOYUMUeVgC3Mg6dEAnSMLML3EA2iNnR-PMok/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHKXctjb5Eo9hM6NscIkvsn59eZbty2Nk3R5pIBLHDO34ocU-qNJDkMYS_SsrI0ED40wpi6Lm5Fd71d5jPjX7vOOvPdM0HZ-feKNsICFezTjLrwqFzN07qh91oonr90PSBHFdFe3NsSB5u/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwF-1l8qZN-He9rMOXhBr7e1yjK7aM9C3FeUN_9jjC2pXvuEpszslXCnI4zgBtts0_JUpVWBZx4KOVHe5wU8zbGWVeK_OtBcYPdg9UQghKGUwUig-XOProaHGGOYYrRDPy7vBuAJoTZsLQ/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

                                                                  Happy Blogging