Cara Menciptakan Widget Search Keren Di Blog

Cara Membuat Widget Search Keren di Blog, Search Box atau kotak pencari di blog ialah kotak pencarian untuk memudahkan pengunjung mencari artikel, Widget Search ini sudah dimodifikasi sehingga Widget Search Keren di Blog kelihatan sangat menarik.

Kali ini Kang zain share Cara Membuat Widget Search Keren di Blog dengan memakai Widget saja, alasannya ialah cara menciptakan box search itu ada yang memakai edit html. dari pada ribet kang zain jadikan simple tanpa mengedit html. tapi karenanya sama dan tentunya keren. hehehe

Untuk lihat Hasilnya menyerupai 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 instruksi 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/AVvXsEhRXqhtgy5Vd7hUlgVsnhkcJfde2u76Oh3EPieZS32ZM_ItZ4SoSGOJnq6vAmVCMK_GsklVOs1UIZuKsQ_h0w8x9C5KCaNBhCNpzzoOMYlsunH9cDcC7LdEyfWaQ46HgdV99hpI6gtwKNM/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 dapat bebas taruh widget sesuai dengan keinginan.

Catatan :

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

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

3. Jika masih galau silahkan komentar. tapi tutorial diatas cukup mudah. ok

sekian dulu Cara Membuat Widget Search Keren di Blog, dah gampang bukan cari artikelnya, blog jadi lengkap fiturnya dan keren. goog luck 

Selamat Mencoba !!!!!!

 

Bagikan Artikel ini