Cara Membuat Kotak Pencarian Responsive di Blog
Selasa, 17 Maret 2020
Cara Membuat Kotak Pencarian Responsive di Blog - Kotak Pencarian adalah kotak yang digunakan untuk mencari suatu post pada sebuah
blog. Dengan adanya kotak ini, maka akan lebih memudahkan pengunjung
untuk menelusuri isi blog / web kita.
Nah, pada postingan kali ini saya akan membagikan sebuah tutorial untuk
membuat Kotak Pencarian atau Search Box pada Blog. Kotak Pencarian yang
akan saya bagikan di sini sudah memiliki fitur Responsive, dan tampilan
dari kotak nya pun bisa dibilang lumayan keren.
Silahkan lihat gambar dibawah, untuk melihat tampilan dari kotak
pencarian yang akan kita buat nantinya.
Apakah sobat tertarik ? Jika sobat tertarik untuk membuatnya di Blog sobat, silahkan lihat cara membuatnya dibawah ini.
Cara Membuat Kotak Pencarian Responsive di Blog
1. Masuk ke Blogger
2. Klik menu Template > Edit HTML
3. Lalu letakkan kode berikut ini tepat di atas kode </head> (Ctrl+F)
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Catatan : Kode diatas adalah kode untuk menambahkan Font Awesome di Blog.
Jika di blog sobat sudah terpasang font awesome, maka kode diatas tidak
perlu lagi sobat pasang.
4. Selanjutnya, silahkan sobat cari lagi kode ]]></b:skin>. Jika sudah ketemu, copy dan paste kode berikut ini tepat
diatasnya.
/* Search Box */
#search-box {position: relative;width: 100%;margin: 10px 0 0 0;margin-bottom:10px;}#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: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
5. Simpan Template. Lalu klik menu Tata Letak dan add gadget pada sidebar blog.
6. Pilih HTML/JavaScript. Setelah itu, silahkan sobat copy dan paste kode berikut ini
didalamnya. Judulnya dikosongkan saja.
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Di Sini...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></span></button>
</form>
</div>
7. Klik Simpan dan klik Simpan Setelan
