Membuat Kotak Pencarian Dengan Tampilan Metro UI

Dalam postingan kali ini saya akan berbagi sedikit mengenai pembuatan kotak pencarian dalam blog. Dalam tutorial kali ini adalah sebuah kotak pencarian yang memiliki tampilan metro yang sering kita jumpai di Windows 8, yah tak perlu panjang lebar silahkan untuk mulai membuatnya.

1. Langkah pertama buka akun blooger kamu.
2. Kemudian masuk ke template, lalu tambahkan gadget
3. Setelah keluar menu pop up kemudian pilih <HTML/Java Script>
4. Kemudian paste-kan coding ini, copas langsung.
5. Kemudian simpan, untuk tata letaknya bisa sobat atur sesuai keinganan.

 
<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #0724f7;
   
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-btn:hover {background: grey;}
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 145px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Masukkan Teks....."/>
<input id="abt-search-btn" value="Cari" type="submit"/>
</form>
</a>

OKe sekian tutoriral dari saya. terima kasih.

Share on Google Plus

About Bgaze

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.