Cara Menciptakan Widget Kotak Pencarian Responsive Keren




Cara Membuat Widget Search (Kotak Pencarian) Keren – Kotak pencarian atau dalam bahasa blogger blogspot dikenal dengan widget search box ialah halaman pencarian artikel pada blog, Widget ini dirasa wajib untuk dipasang diblog. alasannya ialah dengan pemanis search button ini sanggup memudahkan pengunjung atau visitor blog lebih gampang menemukan artikel yang dicari.

Membuat kotak pencarian di blog bukanlah hal yang sulit, anda niscaya sanggup memasang dengan gampang walaupun tidak mengenal arahan html. Widget kotak pencarian yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan banyak sekali perangkat mobile. hal ini sangat penting alasannya ialah hampir 50-80% pengunjung dikala ini memakai perangkat mobile.
Untuk memasang kotak pencarian di blog, anda cukup melaksanakan dua langkah yaitu memasang arahan css dan arahan html berikut ini:

Pasang Kode CSS terlebih dahulu

Pertama, Login Blogger kemudian pilih sajian template kemudian pilih edit HTML.
Kedua, Copy dan pastekan arahan dibawah ini sempurna diatas ]]></b:skin>


  /*Search Box*/
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}

Terakhir klik SAVE/Simpan

Selanjutnya Pasang Kotak Pencarian Pada Sidebar Blog

1. Masuk akun blogger anda, kemudian pilih “Tata Letak”
2. Kemudian tambahkan gadget dan pilih HTML/Javascript.
3. Silahkan masukkan arahan dibawah ini pada kolom HTML/Javascript


<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>

4. Jangan lupa Save/Simpan dan lihat hasilnya.

# Cara Paling Praktis Membuat Kotak Pencarian Keren
Cara yang kedua ini merupakan cara paling gampang yang sanggup anda lakukan tanpa edit HTML. jikalau anda tertarik silahkan ikuti tutorial berikut ini:

1. Login akun Blogger anda.
2. Pilih sajian “Tata Letak” kemudian pilih Add Gagdet, kemudian pilih “HTML/Javascript”
3. Copy dan Paste arahan berikut ini kedalam kolom “HTML/Javascript”



<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>

4. Selesai, jangan lupa klik Save/Simpan



Catatan:

  • background-color: #1a7db7; ialah warna tombol search. jikalau anda ingin merubah warnanya silahkan ganti arahan warna #1a7db7 dengan arahan warna pilihan anda.
  • Cari Artikel Disini… : Kata-kata dalam kolom pencarian.

Demikian 2 cara menciptakan kotak pencarian di blog supaya sanggup bermanfaat, silahkan untuk praktek di blog eksklusif anda.

Selamat Mencoba...