Tutorial: Kod Kotak Pencarian (Search Box) Simple untuk Blogger

 Cara memasangnya:

1. Layout > Add a Gadget
2. Pilih HTML/JavaScript

3. Tajuk widget kosongkan.
4. Pilih dan salin salah satu kod kotak pencarian untuk blog di bawah ini
5. Save!

Kod Kotak Pencarian (Search Box) untuk Blogger

<style>
#searchbox {background: #d8d8d8;border: 1px ;padding: 5px 5px;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/AVvXsEgfDO-fwRDYSdT8yGk9bKkZjXwtzoCkSpyfQ7vaZck4ICzqyHJhVH-JF_2tSsCME1-3GpZ1euVXOS-0aw-ysqX7IjTMTS-OlcaZDdyoqscCTNuam30t3EXF5N70CLxmigHYbT5CFQ0zr9dV/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>

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDO-fwRDYSdT8yGk9bKkZjXwtzoCkSpyfQ7vaZck4ICzqyHJhVH-JF_2tSsCME1-3GpZ1euVXOS-0aw-ysqX7IjTMTS-OlcaZDdyoqscCTNuam30t3EXF5N70CLxmigHYbT5CFQ0zr9dV/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 0;-moz-transition:all .7s ease 0;-o-transition:all .7s ease 0;transition:all .7s ease 0}
#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/AVvXsEgoQxJuTjn4W-i_JfpLiE50y-m7cfb4mpVSEYOW1wdenuuGWdFmqIyhVp6nN_TsXIFxIb23k7RkH9VgT3Rgk_abIjAZ-a2OcXNu6rlfsUTJl8SBrrH6DmgTicaECe8WphaPbxcqfalYrq5M/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>
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCM27QKZMRFDztNKhgZ-U8a4GV0IQTRrLjKC8MXqG_ToLtCzSSZ45aUlHuavrai1kyuHpOb_1hzfjOXVuGW1iY3q2DAQlwYvMcMas9J9_-YllKBW6VPcwzmBZNR66LNVt6HDn40uZHSmO/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-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/AVvXsEiyq9LdFNzHx5oQCRiXWgI_odYXSG1iwZZqJuMT2JRp7MMby9GqdErLuJad08Au2T0MnymeLj7-ArdTC_NUdw_N-OyM4hrXE8w9sMqdxUmE93I5BSU4mzra3yaSz1OBp-cik0eWahxSR3wX/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/AVvXsEiM96FpyGQMzZ0oPHwJLdP7gmjnssNqhJWnNJISMEN3FPms86_ZdN61fvGIQbv98r9fNt01k9PvAWn4KS2W8rWduH2wjPtPgYFQMeTz6XsOyypuuGA69VJM-pjMkotXA9H4ZjF-SdEbNDWN/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>

<style type="text/css">
#hbz-searchbox{min-width:250px;margin:10px auto;border-radius:3px;overflow:hidden;max-width:300px}
#hbz-input{width:59.2%;padding:10.5px 4%;font:bold 15px "lucida sans","trebuchet MS",Tahoma;border:none;background-color:#EEE}
#hbz-input:focus{outline:none;background-color:#FFF;box-shadow:0 0 2px #333 inset}
#hbz-submit{overflow:visible;position:relative;float:right;border:none;padding:0;cursor:pointer;height:40px;width:32.8%;font:bold 15px/40px "lucida sans","trebuchet MS",Tahoma;color:#FFF;text-transform:uppercase;background-color:#D83C3C}
#hbz-submit::before{content:"";position:absolute;border-width:8px;border-style:solid solid solid none;border-color:transparent #D83C3C;top:12px;left:-6px}
#hbz-submit:focus,#hbz-submit:active{background-color:#C42F2F;outline:none}
#hbz-submit:focus::before,#hbz-submit:active::before{border-color:transparent #C42F2F}
#hbz-submit:hover{background-color:#E54040}
#hbz-submit:hover::before{border-color:transparent #E54040}
</style>
<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="hbz-submit" type="submit">Search</button>
</form>

<center>
<style>
#search{border:1px solid #BDBDBD;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvaXGZde3J0mvkKaVLHPesYOyUP10xW71nG0IlPhHtj0rYYTqHrJuMh14Hd1_UdLOFNxxsQ-B3MEzcqkuYaXubc8OmIj4637DOeG8v3k6p3tAEyZxe6GWO5UfKjiYIVA_44ZIBWRj-Rk4m/h120/search3.png) 98% 50% no-repeat;text-align:left;padding:8px 24px 6px 6px;width:85%;height:18px;mouse:pointer:}
#search #s{background:none;color:#BDBDBD;font-family:verdana;font-size:11px;border:0;width:100%;padding:0;margin:0;outline:none}
</style>
<div id="search" title="Tulis lalu tekan Enter">
<form action="/search" id="searchform" method="get"> <input id="s"
name="q" onblur='if (this.value == "") {this.value = "Search";}'
onfocus='if (this.value == "Search") {this.value = "";}' value="Search"
type="text"> </form>
</div>
</center>

<style>
#search-box{position:relative;width:100%;margin:0}
#search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:11px 0 12px 1em;color:#333;outline:none}
#search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#4d90fe;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Sumber : Blog Romeltea