How to Add 6 Stylish Custom Search Boxes To Blogger

Choose What Type Of Box Do You Want To Add To Your Blog !

<style type="text/css">
#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/AVvXsEjjWwTwDt0qELNTXZm49WeDRUbd1DcmJDE-KnNQ-R3vhCJ-q8gLyCtxEjsp8fhXI50kNBtzUx49dYW4lldrFd6ODl0ex4IUQr88cj2QAYQlmRASSp41_OhwbLxEp-oQq9ZQq7embZdLSzp8/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: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>

<style type="text/css">
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWwTwDt0qELNTXZm49WeDRUbd1DcmJDE-KnNQ-R3vhCJ-q8gLyCtxEjsp8fhXI50kNBtzUx49dYW4lldrFd6ODl0ex4IUQr88cj2QAYQlmRASSp41_OhwbLxEp-oQq9ZQq7embZdLSzp8/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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79fA19oF_wGWgspzHkrsqq_JjesLjLXeUm1PrDlarwVskHYZ-diK07vrQMkYnpODbCHSEoS1O6R5yPEBEXHl6FtjrqmEmrgUT4CICHfxFt6h4mSw97O03rvLd-huasBjOnEXZKvWNnel_/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>

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHIpBlBWlcnmNTXdN6NUbq6RMaxuI_Zj6Frxrk64VhUsoKlC70nmJfBAKQTcL9uPEc7z5oU0MbBKaHsmcocXfmXGbx23mjTZ5lHGGcZEU-8ygAVEm1C_KPCZ0YDiySaraB2k030G53Reg/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 0 0 20px;padding: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/AVvXsEjNm17M_xxP8t4WGIzdboPx2k3OaCFfM3AuDlmETIRPil5IHTYSRWdaCNgzS13rMOpJA1z6uQlvqvxtNnYW00hCv7GpWxHbpuW_HidbvFy0zZwkke1gOGtlx_ixCociehyphenhyphenYAKVfNBF-g8z4/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/AVvXsEjDjOm9CQs-a52UxHqILgbJyi0HrLdBqnoyCMZ2qxrSQk_sbPjOOEmDvZF5bCCUtfKcynxgDdqAGKf8l4xqPqO8sYd3KQ1_sZEuF-Q_EIG7BwwACeL4b7sIZn9K_zg8RolJXaHwe1_8nDGV/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjOm9CQs-a52UxHqILgbJyi0HrLdBqnoyCMZ2qxrSQk_sbPjOOEmDvZF5bCCUtfKcynxgDdqAGKf8l4xqPqO8sYd3KQ1_sZEuF-Q_EIG7BwwACeL4b7sIZn9K_zg8RolJXaHwe1_8nDGV/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>

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAoGFquYZInnSjK88Hc_tBoG0VrdDIoaP3h-J9UrFPG97GoqqbnPlq55J7wM5MxBUVhAQdGdIJfjV38UZ3RNP2QBMgla96qOSE0vvXWcuNiQ5ZZTSFrxyjLDaDY8CSdvhp1lyMdAzvfXbd/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:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCS7BNrSDylst_BtHTlzh-YMq5VQZ543dESNUNKoH_9bzT1fPL15LIfNFtU7J-0S641Uf9UMNHb01nTalbAZNfnP3_u8hq2LDA96bCze3aF0Jp_4Bwrhk1uStlT4QCd9maKEjfv2bOlTg/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/AVvXsEghDtvEmInJu7r80m7jcVxgq_oBbNJ6Rc2wz1FInDXyTqRVHLXpVOt2B2ji154eLTpql6QB5e2MVrS3lrmHFKkUUEAkZXq0pgpO4tlvaaUgRnjyhmcmdirNgsCFE_7ay_foqW78MFLu7laT/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>

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5mdZhcFhnVJJOGDH6jJROu95mCC4V9ZsnXYNkuyLDgzVZKa6oGlrj6Ykb-8V7akkfvfwXuUEBqHOdcnnYUpGWmg4APfNNRuQjPhI6LeZwu46mDHQLLBSp2MqZaso39Rg5RtWCgcTcRcL/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:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdvjYVvmJ9_mt95NPxEs3iFQ_mWhhpx_uqTmRq0npCCuf6q76vUtbsz4ess_LKg1aF_ViIYZpmGTdUUJVjQxxcHNyTmGSS3nIo9hUerneefeJE_fICvp0x6VVkrhCrsSQn-hBHaujMSkC/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDFMBbaBZJWqpMSMEy7Q9dkLyknOAk5pyKRS9BNTlL6dWjHYgOoIauTidyDi00y99no5r7F3McyfU8Fs1JofkTuF2SHT-Ho6oLBTMM9UjJR6_HLUsmXA51wO3w97neRnLWnE8stJO5Hgd/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDFMBbaBZJWqpMSMEy7Q9dkLyknOAk5pyKRS9BNTlL6dWjHYgOoIauTidyDi00y99no5r7F3McyfU8Fs1JofkTuF2SHT-Ho6oLBTMM9UjJR6_HLUsmXA51wO3w97neRnLWnE8stJO5Hgd/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>

<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul7O9-bAc_KxAp_-0NuK9iE6-py1xX2_2DON2JpsqEvUoXG4N1fUdbKw2qXE5wFI_IzE0_BEf3hn4lyaGria5x4R3qj7iyW21tqs9oZvy2BKnvZuz_84sehRSCAgpjskmFJvvITqeBJIj/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:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;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/AVvXsEiZp5msDAG6DmufIFxl51FAqKaSyA7SbwDXzznSKqm59g8RRsJ49-VZeTfHHYayXIZeXXNO3I9noadvhhBlI36bnjWxTUPYeJ5zfSSXnJMRCWHiJ2hQ6nzKBcy_ziWi-j7eslvA90yc48U5/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfG3N0DFwpgE9T5GXxfjlIbccUJlfUNxxb-PBT4qCtIBfU2DWC1deb052nCX3S4mCaIPgV21LoU4FK8_aDzVFtFuc1Ny4CGYtN3a1rthUXEx2r107PhBRqURKACaEE1aau4_yrEmxL3o_W/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>

How to Add Custom Search Box To Blogger Blog

1. Log In To Your Blogger Account
2. Go To Layout And Click On [ Add a gadget ] Link.
3. Choose HTML/JavaScript From The Pop-up Window.
4. Paste The Code Of The Search Box Inside The Empty Box
5. Press Save, Enjoy !