5 GAYA CUSTOM SEARCH BOX

Kotak pencarian dalam blog memiliki banyak fungsi. Blogspot juga menyediakan fasilitas ini pada pilihan widget-nya. Hanya saja, fasilitas defult dari blogspot kurang interaktif dan kadang tidak akurat, bahkan belum mampu mencari artikel yang baru diposting. Oleh karena itu dibutuhkan kotak pencarian baru.

Lalu bagaimana cara membuat dan memasangnya. saya akan berupaya memberi penjelasan dari awal Cara Membuat dan Memasang Custom Search Box di blog. Ada sebuah aturan yang tak tertulis dalam dunia design web yang mengatakan bahwa setiap web harus memiliki kotak pencarian, ada beberapa rancangan gadget pencarian di bawah ini, pilih sesuai template blog anda untuk memberikan beberapa manfaat kepada para pembaca.

Kotak pencarian tidak hanya mempercantik desain blog anda, tapi pembaca akan sangat nyaman saat melakukan pencarian untuk artikel yang mereka inginkan.

Untuk anda yang ingin memasang gadget custom search di blog, di bawah ini ada beberapa pilihan Gadget.

<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/AVvXsEh1kw_u-ydIqS-IlUVHompBWtA4JPcoW37-GhfSZpEHkbl548NJvo24ozAEvVrqkJEBShK-vy_Q1_1j_TSn2M7Y3padJc-h8yVe9xa4dUYcjyzlU3Hl3z1ZDrQRHxNlSW2tgJSD3zcV7hSX/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/AVvXsEh1kw_u-ydIqS-IlUVHompBWtA4JPcoW37-GhfSZpEHkbl548NJvo24ozAEvVrqkJEBShK-vy_Q1_1j_TSn2M7Y3padJc-h8yVe9xa4dUYcjyzlU3Hl3z1ZDrQRHxNlSW2tgJSD3zcV7hSX/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/AVvXsEgnNLc1XIH_Kl5OffRiH8aWcStIrhwO6sU4IwV0M1Bs8VI8P53pOOXnquKrR8TBLZJ7xCxf1jJyn46MkRR8GPt7zc9Tk7IDPNC3WkHmTOH_YBqoyD6H1EcvKEkddwMQTdR2uG7c_CFCIFg3/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/AVvXsEhbvwgqO3vchSO5n8AaIvJ39QNBfjMQW86aXPCyoQ7VESVPMwyKXGeV6tjGNoGzZmd2e0HH3wYBt_1pOjhqZ5btylF5jS3dcsQedO68GBcHydKCEFSPYWqBawYgaqIGWP5A247zAY1HEaG_/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/AVvXsEiXhx39Q2lpeM_ZekzVOZzOdwPYnqRTVb_akdO3C7l6TK2LYIOJ_NLPyR70A2N1xjti5-HtMEthiJbo22WKgvKrzKUmsQb-52l2CIdGmVxn13gVI_IWfxdnW6_N_Ab-1e2nHeyEw4M7_eZf/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/AVvXsEg0GysLfXVboTHou3gLEyqMZsPESs-dySq-Eb4hI6jp7VzZ8S47Ve5kHif43Q60yZcBlrWxONBG6Kkrjtwo1DTVFzKjrp4vTPlcN3f2WMqDCvEHx6K5oLW54ACkXktcXhoxerHRRkPSnv8c/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/AVvXsEgD_fZUJ7O45wUmgnpjH5VoUMDX0qgdxRQ4jLOC16i-D7hnJPAzFZR7N-LzBn1PfqK_wAK3dqJrM3hcY7-PPb5oDIiuISSPvQeyxTY1MgmS9Mo-iuqPp5xlFa7UA5_arNsRZ4vDBQ96ODqU/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/AVvXsEgmHPu750_K2KyLicGRxAo2wkQZvGXSLeTWtxsBNBi5qH50cKI83VshwsJd5cJewzsUKVTlGeMvvxbuJQ8f1PiEczKvpGXNZghsbjrABzM-cWAmUhKrmvWhuzbosp86ioqXvpVZKzilEEcb/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/AVvXsEhjpOqWoaV47Pwjml0C5L69e6k_yeF3MsgF08zR2Ooll6QmLJTQs19aT6l_kZHoj-yMbzKerHoxrmaZhsYUlySMNdzyDiabDa23on1CwRkZUgZoLMNZf8zVf600cP3foU0n2tijs-aMzByo/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpOqWoaV47Pwjml0C5L69e6k_yeF3MsgF08zR2Ooll6QmLJTQs19aT6l_kZHoj-yMbzKerHoxrmaZhsYUlySMNdzyDiabDa23on1CwRkZUgZoLMNZf8zVf600cP3foU0n2tijs-aMzByo/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/AVvXsEi6IjHgVK-dpd4hBDoBbv4SneVJb6PRmwMqP-X2DYFVmmYTGfIbhs1eBf4HeOEy_Wtj3T7IILnnFJG3NJp0EDnkpE3EOZTbF_3LnomG3smwJ3i3hb1q6Xm7-EhGAdW8asn_dhNdoWXTX4SM/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/AVvXsEi7CkETq5ZgkNaDV4BO7y1q2MhYogNT7v230uMEWqWYYTyNboQ4ZvH_E7gkPZ5VtJG1HUwrTY98e-HoFUM01TXErvwWN3AQxHXuFyCR-4yCf8sU285AbL7eGo8-J4PryMyxFEqb_UeDFhOE/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/AVvXsEj_5gnFo3vRwVQ5zxgi1hxAEI0oQJJGHvErv8yGfLtUZqbqhi9nyiux1pI_cXbXlXFDwHnebT54-5wbrX0yMHtieOQSY1G0PIXj2gRI16HEsnTd1PHmjztu4TY_7snNDvCePqwuUsHm3A6b/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>

Bagaimana cara pasangnya? sangat mudah anda tinggal ikuti langkah berikut ini :

1. Login Blogger >> Pilih Tata Letak >> Klik Tambah Gadget.
2. Pilih HTML/ JavaScript.
3. Paste salah satu kode di atas di dalam kotak konten.

4. Simpan

Gimana mudah bukan? Semoga Artikel ini bermanfaat.!