Cara Membuat Search Box di Blog Hanya Menggunakan Widget

Seperti yang kita tahu, widged pencarian atau search sangatlah berfungsi sebagai media untuk memudahkan pengunjung mencari keberadaan artikel di dalam blog kita. Memang kalau dari segi tampilan keliatan simple, karena itulah ciri dari tampilan Metro UI Windows 8. Maka dari itu tanpa basa - basi lagi, langsung saja berikut ini adalah caranya.

Pertama, Login ke dalam akun Blogger => Masuk ke Dashboard => Pilih Layout => Add a Gadget => Terakhir cari dan pilih HTML/JavaScript Taruh kode di bawah ini di dalam form yang tersedia. Kemudian Klik Save.

 <style>
#abt-search-btn { background: none repeat scroll 0 0 #359BED; border: 0 none; border-radius: 0 0 0 0; color: #FFFFFF; font-weight: 700; padding: 10px 20px; cursor:pointer;
-moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}

#abt-search-btn:hover { color: #fff; background: #80ccee; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}

#abt-search-box { background: none repeat scroll 0 0 #fff; border: 0 none; padding: 10px; width: 61%;}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="Search Here. . . "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

Jika ingin mengubah memperkecil atau memperbesar ukuran widget mudah saja, atur saja value yang ada di bagian Width:61%; Bisa menggunakan value %maupun px, tergantung selera atau ukuran space sidebar blog rekan - rekan. Untuk tampilannya kurang lebih seperti berikut.

Sekian tutorial singkat yang bisa saya share mengenai Widget Pencarian Search Box dengan Sentuhan Metro UI, semoga apa yang saya share dapat bermanfaat.

Source Code : http://www.allbloggertricks.com/ dengan sedikit modifikasi.