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