CARA GAMPANG MEMBUAT KOTAK SEARCH DI BLOG

Sudah seminggu MUIZgak sempat ngeposting, dikarenakan ada acara. Dan kali ini MUIZ 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 MUIZ share screenshotsnya seperti gambar diatas dan jika belum jelas, sobat bisa lihat kotak search yang MUIZ 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/AVvXsEh7eh-VMdg0WjL4KDphOYmR2kYV42gi9wM0PoJy4aGdHgrimaApe8QQEat4AzxF2tjEp1ehOl6W-qHGLO-7gK2A1F1tHIH-VzcCWf8CMieIi7QrNGVe9o6y51t62VfeoTPyEFhzWdrG598/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.....