Cara Membuat Widget Search Keren di Blogger

Cara Membuat Widget Search Keren di Blogger | Trik Bikin Mesin Pencari Lokal di dalam website sendiri. Search Box atau kotak pencari di blog adalah kotak pencarian untuk memudahkan pengunjung mencari artikel, Widget Search ini sudah dimodifikasi sehingga Widget Search Keren di Blog kelihatan sangat menarik.

Kali ini Artikel saya fafan dengan menggunakan Widget saja ya, karena cara membuat box search itu ada yang menggunakan edit html. dari pada ribet kang zain jadikan simple tanpa mengedit html. tapi hasilnya sama dan tentunya keren. hehehe

Untuk lihat Hasilnya seperti gambar dibawah ini atau pada Widget Search di blog ini: 

~ Tutorial ~

Sobat ikuti tutorial Cara Membuat Widget Search Keren di Blog dibawah 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/AVvXsEh73lNI_rfnlCWdMxmRfH_ygMt-TSdHMsncTckItmiRB5ILLEI6jRIqIBex3NZ8aenvxwkFTIeKyQP4VyGrAjTxNp2mZ4g4OxEtDaoLPbA_65xnWtFHAVHJDxu9dLBYFiRuTzgG2kbFF7A/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.

Catatan :

1.  width: 200px; : untuk mengganti lebar kotak, bisa disuaikan dengan template sobat.

2. Cari Artikel Disini : bisa sobat ganti dengan kalimat yang lain.

3. Jika masih bingung silahkan komentar. tapi tutorial diatas cukup mudah.

bila anda ingin search di posisi header : Cara Membuat Kotak Search Di Header Blogger

Artikel Saya Fafan ini tentang Cara Membuat Widget Search Keren di Blogger