√ Cara Menciptakan Kotak Pencarian Keren Responsive Dengan Html/Javascript
Konten [Tampil]
Kotak Pencarian (Search Box) merupakan elemen/widget penting yang wajib ada di Blog. Kotak Pencarian ini memudahkan pembaca mencari gosip yang mereka butuhkan di blog kita.
Kotak pencarian juga berkhasiat untuk meningkatkan PageViews, bahkan juga diharapkan ketika ada postingan kita berganti permalink atau berubah linknya.
Berikut ini instruksi kotak pencarian yang ditampikan di sidebar blog dan cara memasangnya. Tampilannya menyerupai gambar di bawah ini.
Cara Membuat Kotak Pencarian
1. Tata letak(layout) > Tambahkan Gadget > pilih HTML/JavaScript2. Judul kosongkan.
3. Taruh instruksi berikut ini di kolom konten.
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {border: 1px solid #ebebeb;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: #54a8d0;cursor: pointer;}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search here..." type="text" vk_1c225="subscribed"/>
<button id="search-button" type="submit">
<span><i class="fa fa-search"></i></span></button>
</form>
</div>
SIMPAN !
Karena Tombol Cari (Search Button) menggunakan Awesome Font, pastikan di template Anda sudah terpasang linknya. Jika belum ada, pasang instruksi ini di atas kode </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Enjoyy..