Cara Membuat Kotak Pencarian/Search di Blog

 

Fahri's Blog - Berhubung semalam saya mengganti template blog ini, saya cukup bingung. Karena pada template saya yang dulu kotak pencarian memang sudah ada, sedangkan pada template yang baru, belum Ada. Akhirnya saya mencari-cari di google dan akhirnya ketemu juga cara membuat kotak cari di blog. Bagi Anda yang belum mempunyai kotak pencarian di blog Anda, Ikuti langkah-langkah di bawah ini:

1.Login terlebih dahulu di www.blogger.com

2. Copy semua kode di bawah ini

<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/AVvXsEgawVJM0vg0-wvA-9NHGLdRhQeyjWU5cOQugwb_wp9wDbLp93n_Z1KpzsNFdSx6X03l7SggA_dWqduhbfdQ1kqk-VumHOrmM7dh3Ccz-pzQ684ctK6DVXiLoAAA0s7Im1tPRXGVdqNcow/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

3.Pilih Tata Letak / Layout - Tambah Gadget / Add Gadget - Pilih HTML/ JavaScript - Baru pastekan kode di atas ke dalam kotak yang tersedia - Save

4.Selamat Anda sudah berhasil memasang kotak pencarian di blog

Fungsi kotak pencarian ini sebenarnya hanya untuk mempermudah pembaca ataupun kita sebagai pemiliki blogger untuk mencari artikel, agar tidak perlu repot mencari satu persatu.

Tweet

Subscribe to receive free email updates: