Cara membuat kotak pencarian keren untuk blog

Kotak pencarian di dalam website sangatlah penting dan sangat mempengaruhi juga bagi pengunjung blog. Ketika pengunjung blog mengunjungi blog anda dengan banyak artikel dan menu yang menarik tapi tidak ada kotak pencarian, pengunjung blog tersebut 90% akan males berada di blog tersebut.

Widget yang bisa dipasang di Sidebar ini memudahkan pengunjung dan juga admin untuk mencari data, info, dan artikel-artikel lainnya di blog. Pencarian ini akan menampilkan kata yang kita ketik (Menampilkan semua artikel yang ada kata yang kita ketik di kotak pencarian). Oke langsung saja di atas sudah ada contoh gambar yang bisa anda pilih sesuka hati.

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>

3. Klik save (Pojok kanan atas) dan lihat hasilnya. Nah sekarang blog anda sudah semakin cantik dengan dilengkapi form pencarian dan tentunya lebih memudahkan pengunjung/pembaca blog anda untuk mencari artikel dalam blog anda.

Demikianlah tutorial Cara membuat kotak pencarian keren untuk blog yang dapat admin sajikan di blog Cara1Komputer (CK) kali ini. Semoga dapat membantu dan selamat mencoba.