Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog

Baca Juga

Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog. Bisa juga dipasang di sidebar (widget). Nanti ukurannya otomatis menyesuaikan dengan lebar sidebar blog.

What is Kotak Pencarian?

Search box or search field is a graphical control element used in computer programs, such as file managers or web browsers, and on web sites. A search box is usually a single-line text box with the dedicated function of accepting user input to be searched for in a database. Search boxes on web pages are usually used to allow users to enter aquery to be submitted to a Web search engine server-side script, where an index database is queried for entries that contain one or more of the user's keywords.

Search boxes are commonly accompanied by a search button (sometime indicated only by a magnifying glass symbol) to submit the search. However, the search button may be omitted as the user may press the enter key to submit the search, or the search may be sent automatically to present the user with real-time results. (Wikipedia).

Itu dia pengertian dan fungsi Kotak Pencarian di Blog. Makanya, wajib ada!

KODE CSS & HTML "SEARCH BOX" UNTUK BLOGGER

<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>

CARA PASANG
1. Bisa dipasang langsung di dalam template.
2. Bisa dipasang di sidebar.
3. Bisa dipasang di bawah atau atas postingan seperti di bawah ini:

PASANG DI SIDEBAR
1. Layout > Add a Gadget > HTML/Javascript
2. Copas kode di atas ke "Content".
3. Save!

Beres. Kotak pencarian akan muncul di blog Anda!