How To Make Search box ( cara membuat search box ) untuk mencari postingan yang ada di blog anda.

Ok mari kita lakukan bagaimana cara membuat menu search box. Pertama tama saya mau mengenalkan diri saya terlebih dahulu. Nama saya Ahmad Rofi'an, saya bukanlah ahli dalam hal ini tapi saya akan mencoba memberikan contoh yang saya dapat dari web penyedia template pro. jadi saya bukan pembuat search box tersebut dan saya hanya ingin share dan berbagi ilmu dengan anda. Saya sendiri juga masih harus belajar banyak mengenai bahasa pemrogaman.

Pertama-tama awali penulisan dengan memberi judul pada tulisan dengan menyertahan tanda hastag (#) lalu kita harus membuat background nya terlebih dahulu. anda bisa meletakkan searchbox di sebelah kana atau kiri dari header anda. untuk mengaturnya anda harus menulisakan ( float: right; ) setelah itu atur tinggi, lebar,
garis tepi atas dan bawah. dan jangan lupa masukkan bentuk dari model search box yg ingin anda buat seperti contoh di bawah ini :


#searchbox {
    -moz-background-inline-policy: continuous;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWB45p3uRCyh_bwvxVmjls7SjW0UdJjk1MGmc6rTP1yJwrOCpVA0FIAkrxLlTq0OtwA0ZFr_rLlFgltfyGJf3ICjNZ67Cwo3b6bpCf62HPUmPCIPV-ae1EG_5hlzcPO54B5by3egCgx77l/s1600/search.png") no-repeat scroll 0 0 transparent;
    float: right;
    height: 28px;
    margin-right: 35px;
    margin-top: -53px;
    width: 195px;
}

 Agar pada background yg telah anda buat bisa ditulis sesuatu nantinya ( agar seseorang dapat menulis keyword di dalam background tadi maka ikutilah langkah berikut ini. dengan memberi subjudul ( #searchbox .textfield ) atur lebar dan sebagainya yg dapat di tulisi dan seperti pada contoh berikut :

#searchbox .textfield {
    -moz-background-inline-policy: continuous;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    height: 18px;
    margin: 4px 1px 2px 8px;
    width: 150px;
}

Sekarang membuat buttonnya agar bisa di search. button ini berfungsi untuk kelanjutan dari setelah mengetikkan keyword maka akan di teruskan kedalam pencarian. ikuti langkah di bawah ini. 

 #searchbox .button {
    -moz-background-inline-policy: continuous;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    float: left;
    height: 23px;
    margin-left: 2px;
    margin-top: 0;
    width: 23px;
}

ini sudah saya gunakan pada blog saya sendiri seperti pada kolom pojok kiri atas. Jika ada yang salah saya mohon maaf silahkan tinggalkan komen agar saya tau kesalahan saya.
jagnan lupa follow twitter saya @rofian