Membuat Kotak Pencarian (Search Box)

Membuat Kotak Pencarian (Search Box) | Tutorial Blog

Tutorial kali ini saya akan berbagi cara Membuat Kotak Pencarian (Search Box).
Berikut caranya :
  • Login ke Dasbor blogger, klik Design (Rancangan) > Edit HTML, Taruh kode ini di atas kode  ]]></b:skin>
    berikut kodenya:
    #search {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 6px 0 0;
    }
    #searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
    }
    #searchbox {
    background: #84CAF6;
    width: 220px;
    color: #000;
    margin: 0;
    padding: 4px 0 3px 5px;
    border: 1px solid #005BC3;
    display: inline;
    font: normal 12px Georgia, Times New Roman, Trebuchet MS;
    }
    #searchbutton {
    background: #84CAF6 !important;
    color: #000;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    border: 1px solid #005BC3;
    font: bold 11px Georgia, Times New Roman, Trebuchet MS;
    }
  • Save Template.
  • Sekarang ke Page Element, klik Add a Widget > HTML/Javascript Masukkan kode ini di dalam area content.
    • <div id='search'>
    <form action='/search/' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
    <input class='btn' type='submit' value='Go'/>
    </form>
    </div>
  • Save dan lihat hasilnya.
Semoga bermanfaat...!

Artikel lainnya :
Diposting oleh pukul
Label:Bisnis,dollar,gratis,tips ,

Tidak ada komentar:

Posting Komentar

Anda diperkenankan untuk meninggalkan komentar.
Semua komentar yang masuk tanpa melalui proses seleksi sehingga komentar tidak mewakili opini dari blog ini
Silahkan klik Poskan Komentar atau Form Komentar jika kotak komentar belum muncul

Langganan: Posting Komentar (Atom)