Приветствую Вас Прохожий | RSS Четверг, 08.12.2016, 07:01
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 3
Гостей: 3
Пользователей: 0


Главная » Статьи » Наполнение сайта

Поиск в интернете на вашем сайте от Google API
В многих блогах задаются вопросы, а как сделать чтобы пользователи могли пользоваться поиском прямо на сайте, и чтобы все стили могли изменить мы сами. То есть надо создать свой поисковик на сайте, типа как в многих крупных поисковых систем... Конечно мы свой поисковик создавать не будем, но воспользуемся функцией Google API, с помощью Google API мы сможем создать очень красивую страницу для поиска, как на сайте как и в интернете.
Сейчас я покажу вам как пользоваться функцией Google API, конечно можно и другие поисковики использовать, например Яндекс, но более удобной функции как Google API для этой работы я еще не встретил.

Для начало давайте посмотрим как он выглядеть а потом по тестируем

И так, как вы видите на скрине нету не какого логотипа, или других материалов, которые бы помешали для вашего проекта, например есть условные рекламные баннеры для пользования каких то функцией некоторых проектов. Так давайте уже начнем установку поисковика на ваш сайт, и так.. первое что нам нужно сделать это сама страница с формой поиска:

1. Создайте один HTML файл и откройте его с помощью блокнота, и оставьте HTML страницу открытым в интернет браузере, в HTML файл (в блокнот) добавьте эту готовую страницу

search.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="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>


Теперь страница уже готова, осталось пере залить все файлы .js .css в ваш сервер.
Смотрим настройки стилей, стили CSS находятся в файле styles.css. Здесь приводится только наиболее интересная их часть.

Теперь конечно же и сами стили
CSS

styles.css – Часть 1

Code

#searchForm{
  /* Форма поиска. */
  background: #3d868f url('http://tveet.my1.ru/tt/internet/search/st.gif');
  padding:20px 20px 10px 10px;
  margin:0px ;
  position:relative;

  -moz-border-radius:16px;
  -webkit-border-radius:16px;
  border-radius:16px;
}

fieldset{
  border:none;
}

#searchInputContainer{
  /* Данный div содержит прозрачный прямоугольник над полем текста поиска */
  width:420px;
  height:36px;
  background:url("img/searchBox.png") no-repeat;
  float:left;
  margin-right:12px;
}

#s{
  /* Поле текста поиска. */
   
  border:none;
  color:#3d6d73;
  background:url("img/searchBox.png") no-repeat;
   
  float:left;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  height:36px;
  line-height:36px;
  margin-right:12px;
  outline:medium none;
  padding:0 0 0 35px;
  text-shadow:1px 1px 0 #ccc;
  width:385px;
}

Выше у меня стоит только те стили которые используются для самой формы поле поиска, которые вы можете изменить под свой дизайн и вкус.

Я тут вам все стили показывать не буду, так как сами протестируете, а сейчас я покажу стиль меню которую я сам использую для своего демо сайта
Code

#menu {font: 11px Arial, Helvetica, sans-serif;
  background-image:url('http://tveet.my1.ru/tt/internet/search/bc_bg.png');  
  background-repeat:repeat-x;
  height:30px;
  line-height:30px;
  color:#9b9b9b;
  border:solid 1px #cacaca;
  width:100%;
  overflow:hidden;
  margin:0px;
  padding:0px;
  }
  #menu li {list-style-type:none;
  float:left;
  padding-left:10px;
  }
  #menu a {height:30px;
  display:block;
  background-image:url('http://tveet.my1.ru/tt/internet/search/bc_separator.png');  
  background-repeat:no-repeat;  
  background-position:right;
  padding-right: 15px;
  text-decoration: none;
  color:#454545;
  }
  .home {border:none;
  margin: 8px 0px;
  }
#menu a:hover{color: gray;
  }


Ну тут все понятно, показывать все коды бессмысленно, так что все вопросы задаем в комментариях, а я постараюсь вам помочь.
Давайте теперь посмотрим что у меня вышло, с видами страницы
Форма поискового поле

Результат поиска, и кнопка "Показать еще"

Теперь давайте сами попробуйте поработать с поисковиком.



Вот и все, поисковик на ваш сайт готов, а в следующий рас покажу вам как сделать с помощью Яндекса.
мои записи и на Я.ру 30306778.38452326.1351063807.0b00d70d238d83e2005afa1230b8e22d
Категория: Наполнение сайта | Добавил: STAFF (08.09.2011)
Просмотров: 2493 | Комментарии: 5 | Теги: Google, search, Поисковик, ПРИМЕР, uXPert, API | Рейтинг: 3.7/3
Всего комментариев: 5
5 German   Дата: 21.02.2012  Время: 21:38   [№ 12238]
ИНтересно. Но API Яндекса мне нравится больше. Понятней, проще.

1 мир   Дата: 08.09.2011  Время: 14:17   [№ 10288]
Материальчик суперскии, спасибо.. инфа что надо.

2 STAFF   Дата: 08.09.2011  Время: 14:44   1 [№ 10290]
А я думал не понятно получилось, в планах было написать о API Google а получилось что только про страницу написал, торопился, были дела.

3 мир   Дата: 10.09.2011  Время: 11:21   2 [№ 10298]
Я бы такую статью бы не потянул

4 STAFF   Дата: 10.10.2011  Время: 02:12   3 [№ 10696]
спасибо, это была первая статья...

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru