Panduan Blog Cara mudah membuat Widget Search terkeren di Blog

Cara Membuat Widget Search Keren di Blog, 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 Kang zain share Cara Membuat Widget Search Keren di Blog dengan menggunakan Widget saja, 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

Sobat ikuti tutorial Cara Membuat Widget Search Keren di Blog dibawah ini :

• Seperti biasanya Masuk ke akun blogger >> Dashboard
• Kemudian pilih Tata Letak >> Tambahkan Gadget / Add Gadget
• Sobat Pilih HTML / Javascript
• 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="Pencarian 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/AVvXsEh44mYMfSSPWII7a4kuEXi2ApFE_TAFuUsIaUiOylQH8zzVe8FA0MPTqB30Rh9qEvFsL1KOW78YbuYmjcjmHdpveHAe32_SzvMXFMwUUlFKDswCJK2t5R6yxyr6uT6ofW1O611RgmHDw2o/s1600/Search.png) center right no-repeat;

}

#s::-webkit-input-placeholder, #s:-moz-placeholder {

    color: #607078;

}

</style>

• Langkah Terakhir Simpan agar tidak hilang.
• Anda bisa bebas simpan widget sesuai dengan keinginan.

Catatan :

1. width: 200px; : untuk mengganti lebar kotak, bisa disuaikan dengan template sobat.
2. Pencarian Disini : bisa sobat ganti dengan kalimat yang lain.
3. Jika masih bingung silahkan komentar. tapi tutorial diatas cukup mudah. Ok
4. Kunjungi terus blog saya dan ikuti updatenya

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

Selamat Mencoba !!!!!! oke sip….bye…

loading...

Kamu sedang membaca artikel tentang Panduan Blog Cara mudah membuat Widget Search terkeren di Blog Silahkan baca artikel Putra Anggo Blogger Kacangan Tentang Panduan Membuat Blog Yang lainnya. Kamu boleh menyebar Luaskan atau MengCopy-Paste Artikel ini, Tapi jangan lupa untuk meletakkan Link Panduan Blog Cara mudah membuat Widget Search terkeren di Blog Sebagai sumbernya

Posted by Anggo Putra