В многих блогах задаются вопросы, а как сделать чтобы пользователи могли пользоваться поиском прямо на сайте, и чтобы все стили могли изменить мы сами. То есть надо создать свой поисковик на сайте, типа как в многих крупных поисковых систем... Конечно мы свой поисковик создавать не будем, но воспользуемся функцией Google API, с помощью Google API мы сможем создать очень красивую страницу для поиска, как на сайте как и в интернете
Вставьте в HTML файл эту готовую страницу
Code
<!DOCTYPE html> <html> <head> <ul id="menu"> <li><a href="http://google.com" title="Главная"><img src="http://test-ucozon.do.am/home.png" alt="Home" class="home" /></a></li> <li><a href="http://ucozon.ru" title="Форум поддержки">Форум поддержки</a></li> <li><a href="#" title="Блог">Блог</a></li> <li><a href="#" title="Товары">Товары</a></li> <li><a href="#" title="О нас">О нас</a></li> </ul> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Поиск по сайту с использованием Google | Демонстрация для сайта RUSELLER.COM</title> <link rel="stylesheet" type="text/css" href="http://test-ucozon.do.am/internet/search/styles.css" /> </head> <body> <div id="page"> <h1 id="home"><a href="#" class="s"></a></h1> <form id="searchForm" method="post"> <fieldset> <input id="s" type="text" /> <input type="submit" value="Submit" id="submitButton" /> <div id="searchInContainer"> <input type="radio" name="check" value="site" id="searchSite" checked /> <label for="searchSite" id="siteNameLabel">Поиск по</label> <input type="radio" name="check" value="web" id="searchWeb" /> <label for="searchWeb">Поиск в Интернет</label> </div> <ul class="icons"> <li class="web" title="Страницы" data-searchType="web">Страницы</li> <li class="images" title="Изображения" data-searchType="images">Изображения</li> <li class="news" title="Новости" data-searchType="news">Новости</li> <li class="videos" title="Видео" data-searchType="video">Видео</li> </ul> </fieldset> </form> <div id="resultsDiv"></div> </div> <!-- Блок для реклам партнерев начало --> Тут ваш рекламный баннер <!-- Блок для реклам партнерев конец --> <!-- Нижная часть | меню страницы начало --> <p class="credit"><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a></p> <!-- Нижная часть | меню страницы конец--> <script src="http://test-ucozon.do.am/internet/search/jquery.min.js"></script> <script src="http://test-ucozon.do.am/internet/search/script.js"></script> </body> </html>
Все готово.
Тут я написал только коды для страницы, и если вас заинтересовало то можете почитать мой блог о Google API
Автор\Источник: Пример от ucozon.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.