Membuat Search Box Blog Menyerupai Search Box Google

Kalau lagi buntu pikiran bikin postingan pun jadi susahnya bukan kepalang. Benar-benar susah cari inspirasi untuk mengupdate artikel blog. Daripada termangu enggak karuan, hasilnya 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 inspirasi untuk merubah search box blog ini. Ya...iseng-iseng aku punya inspirasi untuk buat search box menjadi menyerupai search box-nya Google dengan button warna biru itu, ya...setidaknya mirip-mirip lah hehehee....

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

DEMO

Simpan arahan CSS di bawah ini di atas arahan ]]></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 aku gunakan persentase untuk lebarnya (width) pada search-form-nya, silahkan atur-atur biar sesuai dengan blog Anda.

Kemudian silahkan copy arahan 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQqo__J0AzNQB670WNAChBysvSoiWYnseudh_WfuFB7CUb3aXJde0TgD7QnnvQ2YCEVdYcGKtW9KmQXiDAY2CAYtAuy5BvplyJsh6hU9Ox0b9H0UAYSqjWzplPIQ9WFymkhPyWg1m7KbN/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.

• Baca juga: Menambahkan Fungsi Google Custom Search Pada Search Box Blog

Anda juga dapat menambahkan tombol Search by voice pada search box ini. Silahkan baca postingannya pada link di bawah ini.

• Baca juga: Menambahkan Tombol Search By Voice Di Search Box

Selamat mencoba...

UPDATE
Pada search box Google mempunyai perubahan warna border saat hover dan pengetikan keyword pada kotak pencariannya. Sebelumnya aku kurang memperhatikan ini, untuk itu sekarang aku perbaharui arahan CSS-nya dengan menambahkan efek pada hover sama focus-nya. Silahkan ganti arahan CSS di atas dengan arahan 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;}

Sumber https://www.kompiajaib.com/

Share this post