3 Best Seacrh For Blogger

Search Is very important for your website . because it make easily to find Anything that people like to find on your website . In here There are Simple Box Search For Website . You Can Use it all blogger . There Are Three Box Search Style by use CSS and HTML ....

Box 1 :

CSS

<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/AVvXsEgfbttdTVRnoWepHoOw6Wfm50k6Ozys1UrtXHHUp5uQohSN8oekAMWqtUMnoZ6TVbpvcaXv7EjBwhYKCxWQXJvpEc43TTXCyEKIwJ7wzNOtOQGcggy6Km1Dk6e75XZYQc8C9qKBhdbC1fso/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>

HTML:

<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>

Box 2:

<style> #searchbox { width: 280px; background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjZcicaN6NHwgi9QruaCAcPH1YSlFC2cRcvp6s9eBgXgM2CV7IBNKlHtmJ1VgkPyVv1Yi74dY65UtCs92U8l130kiISFL0TyC9Rbka4H9rKJRFumc81OdcFwqKSXrd5TYbFjx1p2WSCHK/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: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7CKN2YEyYONuFQLXNdM2WwfqBrI-EJxlc2hiTXGCqeCyM0KYr-aypd3FlmXhfClOIvqmHj4fZYHITVGzXmNMRRyZR9_G_j8_n9FYYCdvYstkOu7Clv3uLKu6pfFOSEGRCiLCp7Iz7ma6/s1600/search-icon.png) no-repeat; margin-left: -40px; border-width: 0px; width: 40px; height: 50px; } #button-submit:hover { background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPK0ws9uM0wpFtQtF1q_45Bd_LOJcLxqtv8sV9jp71WR6M-Cntpa0iXuXyPA0_grAlxwQjfYdP1Pxsdh7MnbpdDQ8jtQmmy29vJ7ET1vlZA6BJ0uVRJHQ9eiRMAbjpPtQETpGmWZLQccIM/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> Box # 7 custom search box 1 <style type="text/css"> #nbc-searchbox{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigopu5XEYPxywy3XtLAUsoTwmSKPmLodpqvMdxNUaJJD9f1cnf-STDuYO52H8iFir0ufoS01LOACvU6QJaDebwX7QXlPOr0OIS_jU_I7SfrnF6zOg-3RWUPZFMcNtOmNPxS0FtwbeNH8U/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 12px;margin:0;} form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="nbc-searchbox"> <form id="nbc-searchform" action="/search/max-results=8" method="get"> <input type="text" id="s" name="q" value=""/> </form> </div> Box # 8 Custom search box 2 <style type="text/css"> #nbc-searchbox{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8rCiKR06gezUYzeO7jLRcwkzrCqsQhmnxtA03OARNK5YLhWzqQZD3RXbvR7LMXM6CWZfdguMB3_p_Wm5fe2ii-EHF8YGvoO7jK5YAj35sIHmBDMMo5Eg1gyM9ucz8AbE0ng1TzTxFf0/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 12px;margin:0;} form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="nbc-searchbox"> <form id="nbc-searchform" action="/search/max-results=8" method="get"> <input type="text" id="s" name="q" value=""/> </form> </div> Box # 9 Custom search box 3 <style type="text/css"> #w2b-searchbox{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0hRUwWXxYVYKsoKScYtNncWkCWOakcVLhj7sq-NPd34L7tHiw_TCrlmiBgenfxCdgYZVktCtHZ-8UVLI6nzzWKQZ9Q9vk_JEwqrjRW4ap_NuIinwu3TUoCYTDnFfjHABaByyR5NFpftQ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style>

HTML :

<div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Box 3:

<div class='search-box'> <style> #search-area { background: #ffffff urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxj1bUtjbf5qhHIB5fBwMPADan8PmGVgZAh8TFpRAb5_wVa0PsDMoYThdKUmomRTCLyRTBouE2dPtxUZDnQ3pxCA7jk2TdKBLCKZxrB6irr__OYsO5LgvKLSErU9VWSKn6ly7hA5ZD0dU/s1600/search-input-bg.png') no-repeat; height: 52px; } #search_field { margin-top: 8px; margin-left: 12px; outline: 0; border: 0; padding: 2px 0; height: 38px; float: left; width: calcundefined100% - 70px); width: -moz-calcundefined100% - 70px); } #search_submit { background: #ffffff urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2k6fXjH1d8jFbybsm9kxOffpoN5GlhmBYe93rX7QdmxyI5gWSG2dBuFnkBYXMcOHL3Ho_Y1lambMFALfl8LKqYKJoiYXn2bnW8VeTsZum59Fe1o0U7PtrjBuxnC_lVSvmZu_Tfhgads/s1600/search-input-btn.png') no-repeat -1px -1px; background-size: 56px 40px; border: 0; width: 58px; height: 38px; margin-top: 8px; float:right; } #search_submit:active, #search_submit:focus { border: 0; outline:0; } </style>

HTML:

<div id="search-area"> <form expr:action="/search" method="get"> <input autocomplete="off" type="text" name="q" placeholder="Search..." id="search_field"/> <input type="submit" id="search_submit" value=""/> </form> </div> </div>

Now You Can Choose One Box Search That You Like And Put It To You Blog HTML ,,,,
Anything else Please Comment Back ....