Widget Search Keren Untuk Blog

image : design.pakmax.net

Widget Search Keren Untuk Blog - sudah sangat diwajibkan sebuah blog atau website untuk menambahkan widget search ini, karena widget ini sangat berguna sekali dimana yang berfungsi untuk mencari artikel di sebuah blog/website.
anda bosen dengan tampilan search yg gtu gitu aja? halah capek deh, sekarang widget search sudah bisa di cosutme atau di ganti oleh kreasi kita sendiri, dan saya dapat ilmu ini dari sayafafan terima kasih ya fafan :) 
langsung saja di baca tips dan trik dibawah dan langsung di praktekan di blog/website kalian 

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/AVvXsEh1j9vNT-zXlzXlniP6d-jXk0DZZnhSp4fwQMOzabB1Mcfo53X0pX0sAnsars91tR3N2-68VrmdZ-aORxK2YGNykqHICiwSjJXtNFNH95h_rZ6XNaOOUpfGCf2wnSIgWiVsjIZT7A3bCqE/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. dan untuk yang berwarna merah bisa di ganti dengan icon search sesuka hati anda :) 

ada pertanyaan?? langsung saja di komentar siapa tau saya bisa bantu hehehe.

Related Post