Four Stylish Search Box Designs For Blogger

Stylish 'Search Box' always gives extra gorgeous look to your blog. It also helps your viewers to search your blog in a stylish way. Default Search Box looks so dull in your blogger sidebar so today i will tell you how to add stylish Search Box to your Blog.

1. First Login into your Blogger Account.
2. Select your Blog.
3. Now Click on Layout.
4. Click on 'add gadget' option where you want to place your 'Custom Search Box'.
5. Now Click on HTML/Javascript Option as shown in Figure.

1. Now for 'Design 1' Paste the below code in HTML/Javascript.

<style>
#searchbox {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2yB-0ZssLkTqnJp-hC6e1WOpr9ujeD3TM0Br1HXE_WjGTp8S6lZkfFKiJXM88CNHCCuGbWfK5u3xLuuu6UvYHHEDpWpb62CoWjQdpSnsknqG7ocsWA7hrswlD46ECa6zIaDRDJZJvdIQ/s1600/blue+flowers.jpg);
    border: 4px solid #e8e8e8;
    padding: 20px 4px;
    width: 270px;
}
#searchbox {
padding-left:45px;
}
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/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/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: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #1A5CAC;
    border-width: 0px;
    padding: 9px 0px;
    width: 20%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
margin-left:15px;
}
#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>

2. Now for 'Design 2.' paste the following code into HTML/Javascript.

<style>
#searchbox {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpf_E2PGmzueXbTlb5VmAgvsmenJ7d4-s5OD1bfWLx8N-HSplP6cdUJDsb872gvAI2E86TsVEKKwNG59zczZlIv8qgUo5_0tVzarxa_eaLoOrpm80_OJIWy9z3z4e8WKf-Do_ZoVmm22t/s1600/red+serc.jpg);
    border: 4px solid #e8e8e8;
    padding: 20px 4px;
    width: 265px;
    padding-bottom:30px;
    padding-top:22px;
}
#searchbox {
padding-left:38px;
}
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/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/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: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #222222;
    border-width: 0px;
    padding: 9px 0px;
    width: 25%;
    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> 

3. For 'Design 3' paste the below code into HTML/Javascript.

<style>
#searchbox {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSTtfoSBj1lDP3klNi7mn1uHlB9G0P4s8kgCgr9pGakH8XIxKWBWP25tth4SVC9187HFuywEsm4TbrNxzqXJitJYANHyN-cxYaX1hdGpbUCpExCj5kGk1ZRshXvXpBeHDU9p2H9Vv0WAj/s1600/apple.jpg);
    border: 4px solid #e8e8e8;
    padding: 20px 4px;
    width: 208px;
}
#searchbox {
padding-left:70px;
}
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/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/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: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #1A5CAC;
    border-width: 0px;
    padding: 9px 0px;
    width: 25%;
    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> 

4. and for last 'Design 4' paste the below code into Html/javascript gadget.

<style>
#searchbox {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHHYx3f70Ac3zlUAIDUHbviyzjeZgUhF0ZlO899J_ylW7N4qESNzdIhL7L0wDVAtOK5mnCnF6xNPopKg3lkjQPj0930cY93c_9JoJPeFEutA2E_A4UynEASq3qfEIRyN250qHHpUg5nA/s1600/ancient-egyptssaa.jpg);
    border: 4px solid #e8e8e8;
    padding: 20px 4px;
    width: 270px;
}
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/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/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: black;
    width: 60%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #1A5CAC;
    border-width: 0px;
    padding: 9px 0px;
    width: 20%;
    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>

Thats it!. So these are the amazing 'Search Box' designs for your blog.enjoy..