Membuat Search Box Blog Seperti Search Box Google

Membuat Search Box Blog Seperti Search Box Google

Bola Hero Gawai

Membuat Search Box Blog Seperti Search Box Google

Search Box Blog Seperti Search Box Google
Kalau lagi buntu pikiran bikin postingan pun jadi susahnya bukan kepalang. Benar-benar susah cari ide untuk mengupdate artikel blog. Daripada melongo enggak karuan, akhirnya tampilan blog jadi korbannya. Lagi-lagi kutak-katik warna blog biar sedikit lebih fresh hehehe...

Sebenarnya tidak banyak yang dirubah, namun setidaknya otak yang lagi beku ini sedikit bekerja. Akhirnya muncul juga ide untuk merubah search box blog ini. Ya...iseng-iseng saya punya ide untuk buat search box menjadi seperti search box-nya Google dengan button warna biru itu, ya...setidaknya mirip-mirip lah hehehee....

Membuat search box blog seperti search box kepunyaan Google ini cukup sederhana dengan sedikit kode CSS agar tampilannya mirip, seperti yang bisa Anda lihat di atas postingan ini (jika belum saya ganti lagi hehehe...). Jika ada yang tertarik untuk mencobanya juga silahkan copy kode-kodenya di bawah ini.


Simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #AAAAAA;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}

Agar menjadi responsive maka saya gunakan persentase untuk lebarnya (width) pada search-form-nya, silahkan atur-atur agar sesuai dengan blog Anda.

Kemudian silahkan copy kode HTML-nya di bawah ini dan silahkan simpan di mana Anda ingin menampilkannya.

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Jika Anda ingin menambahkan fungsi Google Custom Search pada search box ini silahkan baca lagi postingannya di link di bawah ini.
Anda juga bisa menambahkan tombol Search by voice pada search box ini. Silahkan baca postingannya pada link di bawah ini.
Selamat mencoba...

UPDATE

Pada search box Google memiliki perubahan warna border ketika hover dan pengetikan keyword pada kotak pencariannya. Sebelumnya saya kurang memperhatikan ini, untuk itu kini saya perbaharui kode CSS-nya dengan menambahkan efek pada hover sama focus-nya. Silahkan ganti kode CSS di atas dengan kode CSS di bawah ini. Terima kasih untuk mas Febrianto Putra atas koreksinya.
#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×