Cara Buat Kotak Search (Pencarian) Sidebar Unik Untuk Blogger

Kotak Search (Pencarian) Sidebar Unik Untuk Blogger

Cara Memasang Kotak Pencarian di Sidebar Blog.

Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang di Sidebar ini memudahkan pengunjung, juga admin, untuk mencari data, info, atau tips di blog kita.

Kotak Pencarian juga berfungsi sebagai navigasi sekaligus internal link karena hasil pencarian memunculkan daftar posting kita (jika ada yang dicarinya)

Cara Memasang Kotak Pencarian Keren di Sidebar Blog
1. Layout > Add A Gadget > pilih JavaScript/HTML
2. Copy + Paste kode berikut ini di dalamnya. (Untuk pilihan warna, ganti kode berwarna merah dengan kode-kode yang ada dalam ilustrasi gambar).

<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: #4d90fe;
-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='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

 NB**: "Terima kasih telah Membaca artikel Kami, Jika menurut anda artikel ini Bermanfaat. Silahkan Anda share ke sanak saudara/i atau Teman anda!" :)

Tweet