Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger

Baca Juga

Kotak Pencarian (Search Box) adalah widget penting yang wajib dipasaing di blog.

Posisinya bisa di navigasi menu atas, menu bawah header, atau --lazimnya-- di sidebar.

Kotak pencarian memudahkan pengunjung blog dan admin sendiri mencari tulisan yang dibutuhkan. Posisi atau lokasi kotak pencarian harus mudah ditemukan.

Dalam studi Web Usability NN Group disebutkan, kotak pencarian sangat penting bagi pengunjung dan harus mudah ditemukan dan sederhana. Search: Visible and Simple.

Berikut ini daftar Kode Kotak Pencarian (Search Box) untuk Blogger. Cara memasangnya:

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

3. Judul widget kosongkan.
4. Plih dan Copas salah satu kode kotak pencarian untuk blog di bawah ini
5. Save!

Kode 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/AVvXsEhR9BXdH9jwNQBV2eqcz9FnHvPFQPNPZ5wxbTPof29e8N0j3cgO90N08E8FDqf83a_VmBtt6spOOmfo7qUM0N-UEIYW9ZG7grL_SsHT7wxyre9KjRVxFNu2Sy5LKJEvsmNpvVTdeRBeVpko/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/AVvXsEhR9BXdH9jwNQBV2eqcz9FnHvPFQPNPZ5wxbTPof29e8N0j3cgO90N08E8FDqf83a_VmBtt6spOOmfo7qUM0N-UEIYW9ZG7grL_SsHT7wxyre9KjRVxFNu2Sy5LKJEvsmNpvVTdeRBeVpko/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/AVvXsEhUfKKRIl0MU5goUitBV2bdsT04d_p7bBTzJ6ynWzdkP05LwVqP6z3k0l_1woqq4bjQKnbw9C_21FLAG7fTVxQDweRYC5drQLPf-FUzJbHJf6Zor4DOH66YyJNtHJ1z1V-3IenWzsRQ0S-j/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/AVvXsEhkNUvftIucQzTRF5cvWVEVx3gm0I4J3e550HJElpGhYMYcQj2l3yMiLHIaEJ_43MMAW9xnEsWcrX_7S1FBM08MjUSk9kOWCIHHWUdMZ0npkthSKu-kAgF24-Y-tZvJETiMPPVFeUYhfCux/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/AVvXsEgaFLXuV60kLbJJFrwB7paN6co8MDrUoVBRoiq2NcNKr8yTYjzCFEues8I9SVtrrmdSS6QcIOarhpef43wn-JMpjjKwo3aBPSpcxV54orMx34PD2PYs2wq32Z5M02sXjys1f-O4OnJP84Wz/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/AVvXsEgYty9TGhgLT71OkAM48rCnNW7ZtZpDs3aQyz-ZvClPi9tWW0gNpjqtVCEYP_RHeRMp8tmyO6ZVYh9Jfe30Ss-gbpCzk_yOk8AYnau4zicykX3naCDCNllD1Sy-wC7Xli6X85hV63PVA_31/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/AVvXsEiLE9pISFBN2Me1vU54XoVv-GDUxIDoS6zYVg1mmJAv4ynopLfmo1QCLvibpflV5hIHr_54UBzVdoSCm6XzSNZP5bdpdduFUucLZLZPmbu1RZz9nyWMt1FNTJXJ4v1JjDxwms4o8e3ALPmX/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>

Itu dia beberapa Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger yang saya pilihkan dari berbagai sumber.*