Bagaimana Cara membuat Kotak Pencarian atau Search Box dengan Tampilan yang Menarik di Blogspot

Dalam membuat blog, kadang kita membutuhkan widget yang satu ini, tujuannya untuk mempermudah pencarian dalam blog kita. Blogspot sendiri sebenarnya sudah menyediakannya, dan masuk dalam list widget default nya. Akan tetapi, kadang kita juga kurang puas dengan tampilannya sehingga ingin merubahnya.

Disini kita bisa menggunakan 2 cara untuk memodifikasinya, yaitu memodifikasi tampilan defaultnya langsung atau membuat search box atau kotak pencarian yang baru dengan tampilan yang baru pula. Untuk kali ini, saya menjelaskan cara yang kedua saja dulu, yaitu buat kotak search box yang baru. Tampilannya nanti seperti ini.

Sekarang silahkan masuk dulu di dashboard blogspotmu lalu klik layout/tata letak kemudian tambahkan widget HTML/Java Script. Setelah terbuka, copy script dibawah ini

<style>
#bingkaix {border:1px solid gray;padding:3px;width:200px;overflow:auto;display:block;
-webkit-border-radius: 16px;
-webkit-border--radius: 16px;
-moz-border-radius: 16px;
-moz-border-radius: 16px;
border--radius: 16px;
border-radius: 16px;}
#bingkaix .searchinput {border:none;float:left;margin:0px 0 0px 0;padding-left:5px;WIDTH:85%;;font-family:'trebuchet MS';font-size:15px;background:none}
#bingkaix .submitx {border:none;float:right;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIpO4xfAv_XWfwtuhArccrOE2-gJ8rkB2T2MYdSzFjt5ql_3Y3tHv814NZVFXYAniIWhLGDaY9jV9OEH_TKtAzlcerVaQ8eTeQNOFuAI9dRAHPO_Ow2jfTANgQ8lMuGXWqsgSu3Ys2BQU/s1600/searchbutton.gif') no-repeat;width:22px;height:20px;margin:1px 0 0 1px}</style>
 <script>
 function submitViaEnter(evt) {
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var form = target.form;
    var charCode = (evt.charCode) ? evt.charCode :
        ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
        if (validateForm(form)) {
            form.submit();
            return false;
        }
    }
    return true;
}
</script>
 <div id='kotakcari'>
<form action='/search' id='searchform' method='get'>
<div id=bingkaix>
<input class="searchinput" name="q" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Yang ingin dicari...&quot;;}" onfocus="if (this.value == &quot;Yang ingin dicari...&quot;) {this.value = &quot;&quot;;}" type="text" value="Yang ingin dicari..." onkeypress="return submitViaEnter(event)"/>
<div class ="submitx" onclick="return submitViaEnter(event)"> </div>
<div>
</div></div></form>
</div>

SHARE

Apa kamu suka artikel ini..?