Cara Menciptakan Kotak Penelusuran Responsive Di Blog

Dari dulu blog yang sedang teman-teman baca ini selalu memakai google custom search untuk widget kotak penelusurannya. Selain praktis, dengan memakai google custom search kita juga sanggup menghasilkan uang alasannya ialah ada iklan di dalamnya.

Sayangnya beberapa waktu yang kemudian aku mengalami hambatan dengan kotak pencarian tersebut, dimana bentuknya tidak sesuai dengan yang aku inginkan. Bentuk kotak penelusurannya terlalu besar untuk ukuran blog aku dan kurang balance dengan desain blog.

Akhirnya aku putuskan untuk tidak memakai google custom search lagi, dan aku beralih memakai desain manual yang bukan punya google lagi.

Kotak penelusuran (search box) di blog saya

Bagi teman-teman yang ingin mempunyai kotak pencarian menyerupai milik aku di atas itu...silahkan sanggup mengkopi isyarat HTML yang aku sediakan. Langkah-lanhkahnya cukup mudah..

• Pertama login ke blogger
• Kemudian klik tata letak, kemudian tambahkan gadget di daerah yang diinginkan
• Lalu pilih HTML/javascript
• Kemudian kopikan isyarat HTML/javascript di bawah ini

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;}
#search-box input[type="text"]
{width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;
width: 80px;font-size: 14px;color: #fff;text-align: center;
line-height: 42px;border-width: 0;background-color: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Selesai, jangan lupa di save biar perubahannya muncul di blog.
background-color: #1a7db7; ialah warna tombol search. kalau teman-teman ingin merubah warnanya silahkan ganti isyarat warna #1a7db7 dengan isyarat warna yang lain.
Cari Artikel Disini… : Kata-kata dalam kolom pencarian, sanggup diubah sesuai keinginan.

Berbagi :