Cara Membuat Widget Kotak Search Di Blog

Sudah seminggu Dicky's gak sempat ngeposting, dikarenakan ada acara. Dan kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Kotak Search Di Blog | Kotak Search dapat memudahkan kita untuk menjelajah lebih mudah dan simple saat sedang mencari artikel, kotak search yang Dicky's share screenshotsnya seperti gambar diatas dan jika belum jelas, sobat bisa lihat kotak search yang Dicky's pasang di blog. Oke, gak usah panjang lebar, ini tipsnya.

Berikut Cara Membuat Widget Kotak Search Di Blog :

Tata Letak --> Tambahkan Gadget --> HTML/JavaScript

Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript.

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhkFBCynVcjlUEgDkXgy7ek_j4wMHw7-8S-0EG7LB-1VQFCvegK9TNmhGQqS0xMroHj4bsQ9XtySb57W9PJq9EQo5i690EdQA209WtBrh1NSAPgqVY6U1mBlUVyvGShnTySKo3OTAuGM/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Keterangan :

- Teks yang berwarna BIRU yaitu tulisan yang berada dikotak search, ganti dengan tulisan terserah.

- Kode yang berwarna MERAH yaitu panjang kotak search, ganti dengan angka terserah sesuai keinginan anda.

Semoga Tips Blog yang berjudul Cara Membuat Widget Kotak Search Di Blog bisa bermanfaat.....

dan selamat mencoba......