5 Coolest Search Box Widgets for Blogger Design

How to Blogger - Search Box for bloggers - On this occasion we will discuss how to make a search box (Search Box) or search button (Search Button) responsive and cool on a blog. But first make sure there are no problems with your internet connection... continue!

The search box is a very important element to help readers find relevant articles or posts from blogs. Actually, blogger has provided a default search box widget (Search Box), but unfortunately it is not responsive or not mobile friendly and looks too ordinary.

Now this responsive search box is very useful for blogs on mobile and desktop displays. You can place this responsive search box wherever you want. For example header, sidebar, footer or anywhere on the blog.

For those of you who want to make a responsive and cool search box on your blog, the way to make it is quite easy, you just add a widget as usual or follow the steps the admin will mention below:

1. Log in to your blog account
2. Go to layout then add the HTML/ Javascript widget
3. Enter the code (search box) below.
4. Save

BLOGGER SEARCH BOX CODE 1 

Please enter the code below (html/Javascript widget)

<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:0}
#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wTr05yQ1xAK7D34jb4L-w9jluxPZ01c2kCZERTXTMb1a6V9FRr1B7WbuvcBRyk5cmN13HmjxaMGtlPEI0C3VcwfBv0vY8LuMh6q_utszfKWkuvZHnKLrBBY0O89CLTqqYbPSMbv1trc/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:0}
#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>

BLOGGER SEARCH BOX CODE 2

Please enter the code below (html/Javascript widget)

 <style>
#searchbox{width:240px}
#searchbox input{outline:0}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wTr05yQ1xAK7D34jb4L-w9jluxPZ01c2kCZERTXTMb1a6V9FRr1B7WbuvcBRyk5cmN13HmjxaMGtlPEI0C3VcwfBv0vY8LuMh6q_utszfKWkuvZHnKLrBBY0O89CLTqqYbPSMbv1trc/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6a6f75;width:160px;padding:14px 17px 12px 30px;
-webkit-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
text-shadow:0 2px 3px #fff;
-webkit-transition:all .7s ease 0s;
-moz-transition:all .7s ease 0s;
-o-transition:all .7s ease 0s;
transition:all .7s ease 0s}
#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP-fNBFeg2SLz8_jpxhuHfxzlOXYaAA9lANzQ3KfZYL6f4uC9tjwSBpYjU2Q8vCrEr47LHmNoxJFw7pobqhxGuMBZU6cbQhIzACNYad_FaOU5S1J-cJU3IuxJT1rDolvrhjGAIgmvRhrDy/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</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>

BLOGGER SEARCH BOX CODE 3

Please enter the code below (html/Javascript widget)

<style>
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD47_5aOhLQlwv-oplfJbQiwGvKu0SGXLI6IaUKKBxC2Oqe5Dym-DpPS8GgjEtsPO5O2nvDQGrYPBnTFiAxh0mBBLHZcC1Or7N_Cx0l8yAzY5vFUJmTHMst5ZPH4daiEqPcCd7ApVR6gbO/s1600/searchbar.png) no-repeat;width:208px;height:29px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0 5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9o2O3yjENkzQmWa2tUHkKuhaFxi7c5qH8-JN0wQGuYePAmCCRnWGbAzx9O9TpFM-eUnHCk2a1aDnItQPP8WHZUIc8PosKFp064fEoCwiff9e9kGoou3PqiyDO9wSRLycMgSbEL7TmRkZG/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WrT5yWBX8j39xebGMu0So1q6QFQdbyMoSxMVgcJDt_IEPHW6mFZ33S-rXcoJxKkdeSHetX0SWL9BlGd0DfhwA42MEry-AUbAxiLfInBHlv3Dc_4WbwVb1VozVxG8txjg58rDwT-Qb224/s1600/magnifier-hover.png) no-repeat}
#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WrT5yWBX8j39xebGMu0So1q6QFQdbyMoSxMVgcJDt_IEPHW6mFZ33S-rXcoJxKkdeSHetX0SWL9BlGd0DfhwA42MEry-AUbAxiLfInBHlv3Dc_4WbwVb1VozVxG8txjg58rDwT-Qb224/s1600/magnifier-hover.png) no-repeat;outline:0}
#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

BLOGGER SEARCH BOX CODE 4

Please enter the code below (html/Javascript widget)

<style>
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_RcL4F8i273oq1z6T9OxiQhay37LJLNtE_NGzAhyMnj5JZx38G3UzaybjCs8HJiagPLiubC7q0xm5Hxlrh6chxrrwuLuc207-ajbqBRR07wp_Dwmk8iU7d3XjO88h67YBZ1XD9zeV3G6/s1600/search-box.png) no-repeat;height:27px;width:202px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0 5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;font-style:italic;width:77%;color:#828282;display:inline-table;vertical-align:top}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtg4NdCpZT21vOU6HYlp_p8PKxOdo4bqNBz0nU8cKeS54ClUKqNqS_OrkWLPq0RYLBSYtWbRXvbDPnPhsD93f1G8NL0wRhkEYSJVYsXnkoA0i_9WpQ4QCsDo_ryRxvo3aA7WXqC7DOIWzQ/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQ3ILVFbYQE5Rm9_Tr5aDl69Y92yk2D2XfRvkfkUyOD7bndGpixHBbzJKlmick7bQDdoHWXNlOqOCn-_ZiMQjurAkpDxYRGtSNHL2GQZ3P2W5T4jUau2d1cwvkSoYXQvJe8gDDuiRAesV/s1600/search-button-hover.png) no-repeat}
#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

BLOGGER SEARCH BOX CODE 5

Please enter the code below (html/Javascript widget)

<style>
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHaSOYxonje791fNegwrRCh_OIAj9FBPITCTkPRlsRML3oUA8ZKb3U8WaS6uy4neAjdMHOGpsPmLUz0n3Zx9tfhj8q2AMzo7Sg2r7KuuwSv4wDkAZws1c5HLvlmkVGwGM8aTMHTUCyk38l/s1600/search-box.png) no-repeat}
#searchbox input{outline:0}
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:0;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/AVvXsEjugEOudH29I3QIWrQSQu-QgBgVgWkldIU9xpNgMfH5523xx8zwlQc_tFwOSX9IXXk2Crw7287hHSIDHrdyRWgUkFcGQzBpVmm1OhqHSy0OB3YtF2OBZscpU3Ln92kklz7SSkOM9L-hS89x/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVSjx9JfHJhvAxNGGz8zzY7KJlSALpenGSFOP1HuCUxVWupgXKtI4sXM9tZsS4cDtKphZeWIZ0F7A6sPSnPhU8E3OwLvZ4RqvXFoMjSSiCWeR6Y0gxzcWNrPo4OB9u6nQWjooteEXEk7m/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>

OK bro, please experiment yourself, the point is don't be afraid of making mistakes, keep trying and trying then "Be sure your business will arrive"..

Greetings: Admin A23