Membuat Widget Pencarian Search Box dengan Metro UI Style

Jujur saja saya lagi ga ada ide buat ngisi lembaran demi lembaran di blog ini. Daripada dikira ga pernah update saya share aja sedikit tutorial mengenai Widget Pencarian Search Box yang terpasang di samping kanan sidebar blog ini. Barangkali ada yang tertarik untuk menggunakannya.

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.

Search Widget

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.

31 comments

mantab dah pas. makasih sahre ilmunya mas pertamax nih

terimakasih mas udah share infonya, bisa langsung coba praktekin nih :)

keren sob! ternyata carax simple banget ya...., makasih *smile

Keren banget mesin telusur ubah suaiannya mas, tapi sayangnya di blog saya sdh ada bawaan template, hehehe :)
Makasih sharingnya yg bermanfaat :)

keliatan simple, pastinya bermanfaat bnget, trimaksih triknya sobat

Kalau saya lebih memilih google custom search :D

boleh juga widget pencariannya. bisa diubah sesuai selera lagi :)

Selamat dapat pertamax mas, mugi - mugi saget migunani :)

Iya mas, tinggal diatur aja dibagian value nya sesuai dengan selera atau space di blog.

Selera boleh sama mas, tujuan harus tetep sama (mempermudah visitor blog kita) :D

Yang bawaan juga ga kalah keren. Barangkali suatu saat bosen n ingin mengubah tampilan widget search box nya mungkin artikel ini bisa di Bookmark dulu mbak :D

wah keren nih mas adit.. kalau pemasangannya cuma add widget sih saya suka. karena simpel banget..

tapi kalau sudah bongkar html template, hhhmmm pusing deh.. hehehehe terimakasih mas adit.. tak save dulu deh.. hhehehe

kalau dilihat dari segi tampilan nya, hampir mirip dengan kotak pencarian google search custom ya mas. Bisa dicoba nich widget nya untuk dipasang di blog biar lebih keren :)

simple dan keren ya sob...caranya juga cukup smple...

Iya mas pemasangan tinggal copy paste saja di dalam widget (html/javascript) tidak perlu repot - rwpot bongkar html. Karena saya pribadi sukanya juga mudah - mudah :D

Monggo silahkan mbak, ya mungkin agak beda dikit dengan tampilan google search custom tapi secara fungsi sama persis unutk mencari keberadaan artikel di dalam blog kita.

Karena saya juga sukanya yang simple - simple mas :)

Kereen Mas kelihatan lebih elegan :)

Gan, template yang udah anda modif udah saya download dan sudah saya terapkan di blog ane, tapi kok di related artikelnya deskripsinya begini ya gan "Normal 0 false false false IN X-NONE X-NONE ." kira kira knapa gan??

Saya rasa itu berasal dari artikel nya sendiri mas, coba pada artikel yang bersangkutan pastikan kalau 1 - 2 kalimat awal posisinya tepat berada di awal paragraf text editor blogger. Dan pastikan juga di atas awal kalimat tidak ada kode - kode html / css yang mendahuluinya.

Terimakasih gan, emang pinter agan. Sukses slalu.

mas ini tingkat seo nya bagus ga mas,, maaf

Mas adit, ajarin aku bikin wedget post baru dong!!!

Bagaimana Pendapat Anda?

Diberdayakan oleh Blogger.