Cara Membuat Widget Kotak Pencarian Responsive Keren

Untuk memasang kotak pencarian di blog, anda cukup melakukan dua langkah yaitu memasang kode css dan kode html berikut ini:

Pasang Kode CSS terlebih dahulu

Pertama, Login Blogger kemudian pilih menu template lalu pilih edit HTML.
Kedua, Copy dan pastekan kode dibawah ini tepat 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, lalu pilih “Tata Letak”
2. Kemudian tambahkan gadget dan pilih HTML/Javascript.
3. Silahkan masukkan kode 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 Mudah Membuat Kotak Pencarian Keren

Cara yang kedua ini merupakan cara paling mudah yang bisa anda lakukan tanpa edit HTML. jika anda tertarik silahkan ikuti tutorial berikut ini:

1. Login akun Blogger anda.
2. Pilih menu “Tata Letak” kemudian pilih Add Gagdet, lalu pilih “HTML/Javascript”
3. Copy dan Paste kode 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; adalah warna tombol search. jika anda ingin merubah warnanya silahkan ganti kode warna #1a7db7 dengan kode warna pilihan anda.
• Cari Artikel Disini… : Kata-kata dalam kolom pencarian.

Demikian 2 cara membuat kotak pencarian di blog semoga dapat bermanfaat, silahkan untuk praktek di blog pribadi anda.

Sumber :

https://penaindigo.com/cara-membuat-widget-kotak-pencarian/