Kotak Pencarian Keren untuk Blog

 on Tuesday, December 23, 2014  

Kotak Pencarian Keren untuk Blog
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>

Sumber

Kotak Pencarian Keren untuk Blog 4.5 5 CB Blogger Tuesday, December 23, 2014 Kotak Pencarian Keren untuk Blog Cara Memasang Kotak Pencarian di Sidebar Blog. Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang ...


9 comments:

  1. izin simpan ya sob..
    kapan-kapan dipraktekkan

    ReplyDelete
  2. thanks banyak sob, scripnya manjur,..

    ReplyDelete
  3. Demonya sama yang hasil downloadnya beda.

    ReplyDelete
  4. izin donlot om..trmksh banyak sdh berbagi

    ReplyDelete
  5. request template search engine donk.....

    ReplyDelete
  6. maksih gan, sangat bermanfaat. ane udah pake. salam kenal

    ReplyDelete