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. sebab dengan perhiasan 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 isyarat html. Widget kotak pencarian yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan banyak sekali perangkat mobile. hal ini sangat penting sebab hampir 50-80% pengunjung dikala ini memakai perangkat mobile.
(Baca: Cara Membuat Popular Post Warna-Warni Keren di Blogspot )
Tutorial Membuat Widget Kotak Pencarian Responsive Keren
Untuk memasang kotak pencarian di blog, anda cukup melaksanakan dua langkah yaitu memasang isyarat css dan isyarat html berikut ini:
Pasang Kode CSS terlebih dahulu
Pertama, Login Blogger kemudian pilih hidangan template kemudian pilih edit HTML.
Kedua, Copy dan pastekan isyarat 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 isyarat 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 hidangan “Tata Letak” kemudian pilih Add Gagdet, kemudian pilih “HTML/Javascript”
3. Copy dan Paste isyarat 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 isyarat warna #1a7db7 dengan isyarat 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 langsung anda.
Selamat Mencoba.