Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog

Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog
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!


#search-box {
position: relative;
width: 100%;
margin: 0;

height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
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;

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

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

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

Beres. Kotak pencarian akan muncul di blog Anda!

Thanks for reading Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog | Labels: Desain Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

1 komentar on Kode Kotak Pencarian Mirip Yahoo & Facebook untuk Blog

  1. Kalo mau bikin kayak gini gimana ya gan..

    ini SS nya: http://i.imgur.com/utDWcnj.png


Contact Form


Email *

Message *

Back To Top