Cara Membuat Kotak Search Di Blogger

Cara Membuat Kotak Search Di Blogger

Cara Membuat Kotak Search Di Blog - Hari ini saya ingin membagikan sebuah tutorial untuk teman-teman blogger sekalian. Khususnya untuk teman-teman blogger yang ingin membuat kotak pencarian pada blogger/blogspot blog.

Mungkin ada yang kurang jika kita tidak menambahkan fitur yang satu ini ke blog kita. Karena dengan menambahkan kotak search di blog kita, pengunjung akan dengan mudah mencari artikel yang mereka cari dengan memasukkan sebuah kata kunci di dalamnya.

Kita tidak perlu repot-repot untuk menambahkan search box pada blog kita, cukup mudah dengan mengikuti tutorial di bawah ini :

Cara Membuat Search Box Pada Blog

Langkah 1 : Masuk ke akun blogger >> Dashboard

Langkah 2 :Kemudian pilih Tata Letak >> Tambahkan Gadget / Add Gadget

Langkah 3 : Pilih HTML / Javascript

Langkah 4 : Masukkan kode di bawah ini ke kotak pop up yang keluar !

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Di Blog Ini"/>
</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: 300px;
    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/AVvXsEjkIjpqwxUkMreKWDoQa1o8qvZpHdvQLfVslhmCNSd-w6pntBaUIyeuVjVhvLUDMHTHPPtgcFn-IDfjbzDl3224BoThyKf2gx41AvaX_4j_sxe39m-VgrQjnKuSg4eJ7tApqp4fg6UaPvE/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Langkah 5 : Klik Simpan

Sekarang kalau sudah selesai silahkan lihat blog anda. Untuk mengatur lebarnya silahkan anda ganti 300px pada kode di atas. Semoga artikel tutorial yang singkat ini bisa membantu anda