Cara membuat widget search di blog

Cara membuat widget search di blog

Cara membuat widget search di blog

Sepiringilmuku.blogspot.com kali ini akan membahas tentang Cara membuat widget search di blog,
bagi yang sudah bisa membuat blog atau mahir tentang blog mungkin ini bukan seberapa tapi bagi pemula mungkin masih mencari artikel tentang Cara membuat widget search di blog.
langkah-langkah sebagai berikut :



1. masuk blog
2. Masuk tab menu layout
3. Tambah Widget
4. Pilih Widget HTML
5. Copy paste skrip di bawah ini.

<!--Start Search-->
<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: 600px;
    height: 15px;
    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/AVvXsEjNgHTFghb6e_vQTLehojORvlEiVmU6hSRtIuW4Lv_eRm7B2c8WD0gM9_gCXRc_pZrOjgNFxNuGwUZwgCiWYWspKk3s1aUWtoehnAkW6PPhOy6_HRgx8eJpZ-AIZwQwOYlEzODlJohTG40/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>


Keterangan :
1. Yang saya blog warna Hijau silahkan anda ganti sesuai Deskripsi Search anda
2. Yang saya blog warna Kuning silahkan anda ganti sesuai ukuran keinginan anda
 

6. kemudian save 


semoga bermanfaat,, jangan malu untuk mencoba ,, good luck


sumber: adakomentar.blogspot.com