Сделать поиск по сайту

Поиск по сайту через Google поиск для сайта

Конечно, сложно себе представить более популярную поисковую систему, чем Google. Как известно она занимает лидирующие позиции во всем мире. Но мало, кто знает, что именно благодаря Google вы можете установить удобную поисковую систему на ваш веб-портал.

Как вы сами можете видеть на изображении выше, данный вариант не является бесплатным. То есть вам необходимо будет оплатить минимум 100$ за 20000 поисковых запросов. В том же случае, если поток ваших посетителей, и соответственно и запросов будет больше, стоит рассмотреть более дорогой пакет услуг. Но какие же плюсы у данного предложения за эту сумму? Давайте разбираться.

Основные преимущества поиска по сайту от компании Гугл:

  1. Индивидуальный подход. Вы сами выбираете, как будет выглядеть ваша форма поиска. Если хотите можете заменить лого Google на свое, изменить цвет и т.д.
  2. Языковые возможности. Поиск будет выполнен вне зависимости от того, на каком языке был выполнен запрос.
  3. Ручная настройка. Вы сами можете настроить рейтинг и результаты поиска в зависимости от даты публикации.
  4. Поиск иллюстраций.
  5. Никакой рекламы.
  6. Вне зависимости от того создали ли вы новый материал, или решили отредактировать старый вы сможете отправить робота Google зафиксировать обновления.
  7. Вы вручную сможете настраивать и контролировать список подсказок, которые открываются у пользователя при начале ввода запроса.
  8. Вы можете осуществлять поиск не по одному сайту, а по нескольким.
  9. Поддержка компании. На Google Analytics вы сможете отслеживать статистику запросов и поведение посетителей, а сервис Google Реклама позволит вам зарабатывать на размещении рекламы.

Инструкция как вставить яндекс поиск на сайт

Рассмотрев информацию по поисковой системе Google, у многих резонно возникает вопрос: А как же Яндекс? Что ж давайте рассмотрим и этот вариант, напоследок.

  1. Заходим на сайт «Яндекс поиск для сайта» и нажимаем «Установить поиск».

  1. Далее следует заполнить все графы небольшой анкеты, а именно, указать название сайта и его данные. После чего можно переходить ко второму шагу.

  1. Далее следует настроить внешний вид нашей формы поиска. Как это сделать становиться понятно из граф на странице установки.
  2. Далее идут точные настройки поиска. А именно то, как он будет располагаться на какой странице. Также на данном этапе внизу размещается вариант просмотра результата. Это необходимо для того, чтобы вы наглядно посмотрели на тот вариант, который у вас получается.
  1. На четвертом шаге вы проверяете, работает ли поиск по вашему сайту, а на пятом копируете код доступа и вставляете его на сайт. Для этого заходим в административную панель и переходим в раздел «Документы сайта»-«Колонка на главной»-«Вставить текстовый блок». В появившемся окне вставляем скопированный нами код и активируем его. Сохраняем и обновляем страницу. Если вы все сделали правильно, поиск от Яндекса станет работать на вашей странице.

Мы с вами рассмотрели основные вариации того, как установить поиск на своем сайте. Надеемся информация пригодиться вам и вы сможете установить необходимую форму на своем веб-портале. А нам остается лишь пожелать вам хорошего настроения и удачи!

1. Разметка HTML

<form action=»» method=»get»> <input name=»s» placeholder=»Искать здесь…» type=»search»> <button type=»submit»>Поиск</button> </form>

Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type=»search»> или <input type=»text»>, а кнопка отправки данных на сервер может создаваться с помощью элемента <input type=»submit»> или <button type=»submit»>.

Чем отличается <input type=»search»> от <input type=»text»>? Оба этих поля создают однострочное текстовое поле для ввода текста, но type=»search» добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type=»text».

Чем отличается <input type=»submit»> от <button type=»submit»>? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент <button> является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.

Текст в поля формы можно добавлять двумя способами:
1) <input type=»text» placeholder=»текст»>
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

input::-webkit-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-moz-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-ms-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; }

2) <input type=»text» value=»текст»>
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color, например:

input { color: white; }

Для отображения иконок не забудьте подключить FontAwesome.

2. Поле поиска с кнопкой-иконкой

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input { width: 100%; height: 42px; padding-left: 10px; border: 2px solid #7BA7AB; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C; } button { position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer; } button:before { content: «\f002»; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }

3. Поле поиска с кнопкой внутри

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input, button { border: none; outline: none; border-radius: 3px; } input { width: 100%; height: 42px; background: #F9F0DA; padding-left: 15px; } button { height: 26px; width: 26px; position: absolute; top: 8px; right: 8px; background: #F15B42; cursor: pointer; } button:before { content: «\f105»; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold; }

4. Поле поиска в стиле «flat»

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; background: #A3D0C3; } input, button { border: none; outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; } button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: «\f002»; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }

5. Поле поиска с толстой нижней границей

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; background: #F9F0DA; border-bottom: 4px solid #be290e; } input, button { border: none; outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; } button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: «\f178»; font-family: FontAwesome; font-size: 20px; color: #be290e; }

6. Поле поиска с меняющимся цветом границы

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input, button { outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; border: 3px solid #F9F0DA; } button { border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: «\f002»; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } input:focus { border-color: #311c24 }

7. Выезжающее поле поиска

Поле поиска появляется при нажатии на кнопку с иконкой.

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; height: 42px; } input { height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier(0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index: 2; } input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; } button { background: #683B4D; border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: «\f002»; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }

8. Увеличивающееся в ширину поле поиска

<form> <input type=»text» placeholder=»Искать здесь…»> <button type=»submit»></button> </form> * {box-sizing: border-box;} form { width: auto; float: right; margin-right: 30px; } input { width: 250px; height: 42px; padding-left: 15px; border-radius: 42px; border: 2px solid #324b4e; background: #F9F0DA; outline: none; position: relative; transition: .3s linear; } input:focus { width: 300px; } button { width: 42px; height: 42px; background: none; border: none; position: absolute; top: -2px; right: 0; } button:before{ content: «\f002»; font-family: FontAwesome; color: #324b4e; }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *