BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Cara Memasang Kotak Pencarian Di Blog

KrocoNet.com – Cara Memasang Kotak Pencarian Di Blog, Kotak pencarian memang sangat dibutuhkan dalam blog anda karena itu akan mempermudah pengunjung dalam mencari sebuah artikel dalam blog anda. Selain untuk mempermudah pengunjung dalam mencari informasi dalam blog kita, search box juga berfungsi sebagai navigasi dalam blog anda.

Baca ini : Cara Pasang Widget Di Blogger

Kotak Pencarian Blogger
  1. Pertama Silahkan anda login pada akun anda
  2. Setelah itu anda masuk kemenu layout/tata letak
  3. Pilih Tambahkan Gadget / Add Gadget
  4. Selanjutnya setelah kamu menambahkan gadget masukan script dibawah ini kedalam kolom yang tersedia, berikut scriptnya
<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>

Catatan : Silahkan ganti background search box anda dengan mengganti kode yang saya beri tanda merah dengan kode yang ada pada gambar diatas.

Mungkin itu dia sedikit ilmu yang dapat saya share semoga bermanfaat dan jika ada kritik dan saran untuk saya silahkan berkomentar di kolom yang tersedia. Komentar adalah pembangun untuk blog sederhana ini, Terima Kasih.