Add 6 cool search box to your blogger blog

We all know how a search box is important for a blog. It helps visitor to find the keyword he want. 
At first learn How do you add this search box to your blogger blog

For adding searcbox to your blogger blog first >> then go to Layout  >> Add a Gadget 
and then pest the searc box code you want from below .



1. Simple ash colour search box for blogger 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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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>



2. Stylish ash colour search box for blogger blog.


 <style>#searchbox {width: 240px;}#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: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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 0px 0px 5px;    -moz-border-radius: 5px 0px 0px 5px;    border-radius: 5px 0px 0px 5px;    text-shadow: 0 2px 3px #fff;    -webkit-transition: all 0.7s ease 0s;    -moz-transition: all 0.7s ease 0s;    -o-transition: all 0.7s ease 0s;    transition: all 0.7s ease 0s;}#searchbox input[type="text"]:focus {background: #f7f7f7;border: 2px solid #f7f7f7;width: 200px;padding-left: 10px;}
#button-submit{background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left: -40px;border-width: 0px;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>

3. Hover effect ash colour search box for you blog


 <style>#searchbox {    background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/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: none;}#searchbox input[type="text"] {    background: transparent;    margin: 3px 0px 0px 20px;    padding: 5px 0px 5px 0px;    border-width: 0px;    font-family: "Arial Narrow", Arial, sans-serif;    font-size: 12px;    color: #828282;    width: 70%;    display: inline-table;    vertical-align: top;}#button-submit {    background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;    border-width: 0px;    cursor: pointer;    margin-left: 10px;    margin-top: 4px;    width: 21px;    height: 22px;}#button-submit:hover {    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;}#button-submit:active {    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;    outline: none;}#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> 


4. Hover style black colour search box


<style>#searchbox {    background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/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: none;}
#searchbox input[type="text"] {    background: transparent;    margin: 0px 0px 0px 12px;    padding: 5px 0px 5px 0px;    border-width: 0px;    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(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;    border-width: 0px;    cursor: pointer;    width: 30px;    height: 25px;}
#button-submit:hover {    background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/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> 

5. Crazy pencil art search box for blogger.


 <style>#searchbox {    background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;    width: 250px;    height: 65px;}
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: transparent;    padding: 5px 0px 5px 20px;    margin: 10px 15px 0px 0px;    border-width: 0px;    font-family: "Brush Script MT", cursive;    font-size: 12px;    color: #595959;    width: 65%;    font-weight: bold;    display: inline-table;    vertical-align: top;}
#button-submit {    background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;    border-width: 0px;    cursor: pointer;    margin-top: 10px;    width: 19px;    height: 25px;}
#button-submit:hover {    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;}
#button-submit:active {    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;    outline: none;}
#button-submit::-moz-focus-inner {    border: 0;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />    <input id="button-submit" type="submit" value="" /></form>

6. Awsome black colour search box for blogger


 <style>#searchbox {width: 280px;background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;margin-left: -40px;border-width: 0px;width: 40px;height: 50px;}
#button-submit:hover {background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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> 
 
Copy any one code and have fun with your search box . Don't forget to like us on FaceBook 

Labels: ,