Cara Menambahkan Fitur Search di Blog

~ Tutorial ~

Sahabat ANDALUS ikuti tutorial Cara Membuat Widget Search Keren di Blog dibawah ini :]

hasilnya seperti ini

1. Seperti biasanya Masuk ke akun blogger Dashboard 

2. Kemudian pilih Tata Letak; Tambahkan Gadget / Add Gadget

3. Sobat Pilih HTML / Javascript

4. Masukkan kode di bawah ini ke kotak 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/AVvXsEgK1Kt2SEuNh_Xz9mfl7RbWyjSEGtysUsRprPRBO6SgYtWcVvdwefWqgkoDWkUcly_Ayb1XfhU9yO-Pucm6J0Kxym4rZ1iu7Z4nT2MwOtV3t1b52gemMGC3prXSBOLZzlHDvHLKkuSAbCM/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

5. Langkah Terakhir SAVE agar tidah hilang.

6. Sobat bisa bebas taruh widget sesuai dengan keinginan.

Bila gagal langsung saja kesumbernya aja disini