Как написать поиск по сайту на html
Перейти к содержимому

Как написать поиск по сайту на html

  • автор:

Формы поиска для сайтов

Здравствуйте дорогие читатели моего блога. Сегодня у меня было вдохновение написать хороший пост, но я не знал о чем именно писать. Хочется писать посты о том, что вас сильно бы интересовало. Отсылайте мне письма через форму обратной связи, предлагайте темы, которые вы хотели бы видеть на моем блоге. Буду рад с вами держать связь через e-mail. Спасибо.
Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Вы должны понимать, что любая форма без обработчика работать не будет, другими словами сказать, не будет выдавать задаваемый результат. Наверное я вас запутал?! Я не специально, так просто получилось.

Простой поиск для сайта.

Это простая форма поиска, без всяческих наворотов. Само название «простой поиск для сайтов» говорит само за себя.

Простой поиск для сайта

Вставьте этот код на сайте между тег <body> форма поиска </body>

Скачать форму поискаПросмотреть пример.

Форма поиска с подсветкой.

Сама форма для ввода поиска имеет серый фон, но при нажатии для написания текста в поле поиска, серый фон исчезает.

Форма поиска с подсветкой

Вставьте этот код на сайте между тег <body> форма поиска </body>

Простая, но красивая форма поиска.

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

Простая, но красивая форма поиска.

Скачать форму поискаПросмотреть пример.

Вставьте этот код на сайте между тег <body> форма поиска </body>

background: url( 1.png ) no-repeat scroll 5% 50% rgb(68, 85, 102);
— я выделил красным картинку, которую вы можете смело поменять.

Резиновая форма поиска.

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

Резиновая форма поиска
. и после нажатия формы поля

Резиновая форма поиска

Скачать форму поискаПросмотреть пример.

search.png — это картинка, вы можете поменять на свою.
.form-search input — параметры в CSS до нажатия,
width: 75px; — ширина поля,
height: 32px; — высота поля,
.form-search input:focus — параметры в CSS после нажатия,
width: 160px; — ширина поля после нажатия.

Красивая форма поиска.

В этой форме не используется картинка. Все сделано на чистейшем CSS.

Красивая форма поиска

Скачать форму поискаПросмотреть пример.

Вот и все формы поиска, что я хотел выложить на блоге. Если что-то будет интересное, я обязательно выложу. я не жлоб, хотя. не, точно не жлоб. Удачи.
Есть вопросы, предложения, идеи. Пишите в комментариях.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

87 Ответов на комментарий — Формы поиска для сайтов

Здравствуйте, Степан! С удовольствие почитала статью и подписалась на ваш блог. Я как раз разбиралась с формами на html5 и тут так вовремя набрела на вашу статью. Спасибо Вам. У вас очень красивый дизайн. Успехов вам и благополучия, вам и вашей семье.

Спасибо. Приятно. Рад, что моя статья вам пригодилась.

Красивые формы поиска, а как сделать обработчик формы для WordPress? Спасибо

А откуда резиновая форма поиска берет картинку? Я имею ввиду, если не менять CSS свойства? На моем сайте такой картинки нет и на ваш вроде не ведет…

Если я вас правильно понял, вы не можете установить на сайт резиновую форму поиска?
Вы можете скачать готовы исходный код с картинкой. Для этого нажмите скачать.
Вот картинка с примера https://bloggood.ru/wp-content/lessons/serch/serch-demo/4/search.png
В коде пункт 41-44.
background-image: url(“search.png”), -moz-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -ms-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -o-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -webkit-linear-gradient(#9CC2CA, #DFECEF);
Картинка должна разместится в корне сайта. Если сделать вот так: images/search.png, тогда картинку нужно разместить в папку images.
Если что-то не получается или я вас не так понял, пишите, помогу.

Нет, в коде я разобрался и форму поставил, мне интересно, если взять код из статьи, тогда картинка подгружаться будет с вашего сайта?

Не, это я туплю))))Все понял что надо картинку все таки закачать))))) Вчера ночью смотрел код, спать хотел и тупил)))))

Если использовать код так, как в примере в статье, картинка будет грузиться с вашего сайта. Картинку нужно загрузить в корень сайта. Если захотите картинку загрузить в любую папку сайта, тогда везде, где в CSS прописана картинка search.png укажите путь к папке. Вот так (название папки/search.png).

Правильно Сергей вы поняли.

Добрый день,
Я установила на сайт вашу форму поиска, но она не работает. Т.е. форма поиска видна на сайте, но найти что-либо через неё не возможно. Как это исправить?

Здравствуйте Ирина. Это всего лишь форма для поиска и не более. К этим формам поиска следует подключить скрипт который будет обрабатывать поиск. Если вы используете движок CMS, тогда с “поиском” проблем не должно быть. Какой движок используете вы? Если WordPress, тогда запросто расскажу, как подключить форму поиска.
Пишите, хочу Вам помочь.

Степан, да я использую wordpress

Ирина, посмотрите, есть ли на вашем шаблоне такие файлы:
Результаты поиска (search.php), Форма поиска (searchform.php)?

Есть оба эти файла.

Форму поиска скопируйте в файл (searchform.php). Скопируйте полностью этот код и вставьте его в файл searchform.php.

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

Полностью заменила на код, котрый вы сказали, но что-то не работает

Установите этот код в файле “header.php”.

Это код вывода формы поиска.

Поставила, но пока никаких изменений.

Кстати, форму поиска вы можете поставить и через виджет “ПОИСК – Форма поиска для вашего сайта”.

Давайте я с вами спешусь через почту? Постараюсь разобраться в чем проблема.

да, давайте спишемся в почте. Я буду вам очень признательна за помощь.

Здравствуйте. Подскажите, почему в варианте формы поиска с лупой, эта самая лупа не отображается? Как это можно исправить?
А еще подскажите, можно ли у вас на блоге почитать, о том, как сделать форму комментирования записей со смайликами и добавить фон (в вашем случае линовка),

Здравствуйте еще раз. И еще возник вопрос. Все установилась, картинка, как мне нравится, но поиска по сайту не происходит. Что не так?

Здравствуйте Анастасия. Спасибо вам за комментарии.
Чтобы производился писк по сайту, нужен еще дополнительно скрипт. Вы используете движок WordPress или создаете сайты ручным способом (HTML)? Если вы используете WordPress, могу помочь.

Спасибо за быстрый ответ.
Я использую WordPress.

Здравствуйте. Чтобы отображалась лупа в поиске, нужно прописать правильно путь к картинке с лупой.
Если я вас правильно понял,то по поводу комментариев со смайликами вы можете почитать тут

Да, именно это! Спасибо!

в файле “searchform.php” найдите строку с <form> и замените на такой код

Если плохо объяснил, скажите, какой вы поиск выбрали из статьи.

Степан, дело в том, что у меня нет в теме этого файла вообще. И я не вижу никакого кода.

В том файле в котором вы поставили код формы поиска нужно прописать “action”.
Например, у меня в статье вы видите вот такой код:

ЗАМЕНИТЕ первую строку на вот такую:

К сожалению, описанные вами ниже действия не помогли.

Если вы мне доверяете, можете дать доступ в админ-панель. Я попробую исправить. Если согласны, тогда я вам отпишу на почту.

Боюсь, у меня нет выбора

Гигантская проблема с поиском.. Установила на 404.php. Но поиск осуществляется конкретно на этой несуществующей странице с результатом: Нет результатов для поиска. Как мне быть? В хедэре уже есть форма, она работает и на 404, и на сайте, но в 404.php ваша форма не идет(

Расскажите подробней, какую форму вы устанавливали? Ирина, если Вы просто скопировали и вставили готовый код формы поиска, то этого не достаточно. Она не будет работать без обработчика. Почитайте комментарии. Если далее не будет получаться, пишите, помогу.

Использую простую, но красивую форму поиска. Вордпресс. Почитала все комменты к посту, все попробовала, но результаты поиска не обрабатываются. Меня редиректит на главную без результатов(

Ира, меня интересовал более подробный ответ – Вы использовали форму из моего сайта? Если да, то какую по счету. А лучше скиньте в комментарий код формы поиска, так, как вы используете ее. Посмотрю, насколько правильно вы ее используете.

Писала название, как у вас на сайте написано. Вот код. Пока вставила на страницу 404 ошибки, поскольку на главной не работающая форма не катит, а очень хочется такую, как у вас в коде

Попробуйте вот так. Вот код:

ДА, я использовала именно этот код, не знаю, почему он не вставился. Не работает.

Ирина, откройте CSS файл вашей темы (Внешний вид -> Редактор -> style.css). Найдите в этом файле вот это:

#searchform input
<
float: left;
color: #000000;
border: 1px solid #000000;
>
Замените его на этот:

#searchform input
<
float: left;
color: rgb(255, 255, 255);
border: 2px solid rgb(100, 117, 134);
padding: 5px 2px 5px 30px;
background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
>
Естественно картинку “1.png” залейте ко всем файлам вашей темы. Должно работать на все 100%. Я проверял на вашем сайте “Интернет-магазин женской одежды”. Если не получится, значит, вы что-то не так делаете.

Не как то не очень

Здравствуйте. Попробовал вашу форму поиска. Очень понравилась. (взял последний пример). Только возникли некоторые вопросы. Если можете ответьте пожалуйста.
Добавил форму на статистическую страницу, которая отображается главной. Сам код добавлял не в визуальной закладке, а в закладке текст, т.е. там где виден исходный код. Все хорошо. При сохранении и обновлении страницы поиск отображается нормально, а при переходе на вкладку визуально и обратно форма сбивается и остается только несколько строчек (

)
Как убрать ошибку.
И второй вопрос
На кнопке “Да” изменил надпись “искать” и она переносится на строку ниже. Т.е. получается под поисковым полем. Как разместить ее справа от поискового поля.

Здравствуйте, Виктор!
Ответ на второй вопрос:

Результат:

Насчет второго вопроса, я ничего не понял. Попробуйте еще раз мне объяснить проблему.

Увеличиваю ширину поискового поля до 250px и она съезжает. Получается она просто не помещается, само поле ее вытесняет. Как увеличить блок всего поиска. и как подключить что бы поиск работал.
Да я вставил код прямо на страницу, я правильно сделал? Или надо было в style прописывать.

В “.searchform”, пропишите ширину блока “width: 330px;”. Я проверял на вашем сайте через исходный код, все должно получиться.
Стиль CSS, нужно было прописать в файл style.css, так удобней.
Чтобы работала форма поиска на WordPress, установите в файле “Форма поиска (searchform.php)”.

Что именно в style прописывать. и как тогда выводить на странице?

Так кнопочка стала там где надо. Вставил код как вы сказали, а результаты не выдает. Да кстати у меня в редакторе пустой style, а на хостинге открываю нормально, все прописано.

Виктор, почитайте об этом здесь

Забыл написать. Чтобы отображался поиск, нужно было в файле “header.php” поставить вот такой код:

В файле “Форма поиска (searchform.php)” вот этот:

Степан, Добрый день помогите пожалуйста с поиском, уже всю голову сломал.
Проблема в следующем использую cms WP есть два файла
1.Форма поиска (searchform.php)
2.Результаты поиска (search.php)
Я беру у вас на сайте форму поиска “Резиновая форма поиска” её html и вставляю допустим в файл Заголовок (header.php)все ок она отображается НО ПОИСК ПО САЙТУ НЕ ПРОИСХОДИТ.
Что и КУДА нужно еще вставить??
Нужно ли создавать страницу search .
Как это реализовать? Спасибо)!

Здравствуйте, Егор! У Вас присутствует в шаблоне файл “Результаты поиска (search.php)”?

Да присутствует, вот писал
2.Результаты поиска (search.php)
Какой код куда вставлять ?)

В файле header.php
присутствует строка

проблема в том что не происходит поиск по сайту?
Что не так делаю?

Егор, если вы хотели прописать код в комментариях, это нужно было сделать так:
[ code ] ваш код [ /code ]
Попробуйте в header.php поставить этот код:

В форма поиска (searchform.php) установите этот код:

Все должно работать. Может у вас проблема с файлом “Результаты поиска (search.php)”?
Есть еще один способ как проверить форму поиска. Оставьте CSS стиль так как есть, а форму установите стандартную через виджет. Форма должна получиться резиновой. Жду результатов! Пишите!

Так что имеем, в header у меня стоит тот код который вы дали, в searchform у меня тоже стоит код поиска (поиск отображается), а вот в файле search он просто ПУСТОЙ, что там должно стоять . какой код?

Может некорректно отображаться из-за неуказанных тегов

Доброго времени суток. Очень понравилась твоя тема с формами поиска, я одну использовал. Скажи пожалуйста, что нужно сделать, чтобы она была привязана к сайту и выдавала информацию с него. Создаю сайты на платформе Parallels WPB.

Здравствуйте, Евгений! Мне жаль, но помочь Вам не смогу, так как с платформой Parallels WPB я не знаком. Если бы на WordPress…

Добрый день Степан, я наверное уже достал вопросами но нечего не получается!?
Делаю все как вы написали но поиск не происходит по сайту, я вам доверяю и могу дать доступ в WP, если вам не трудно посмотреть в чем же дело.
Спасибо.

Здравствуйте, Егор! Сбросьте данные через форму “Контакты”.

Здравствуйте, подскажите пожалуйста,как сделать так чтоб заходя на сайт пользователи видели только лупу, а при нажатии на нее выдвигалась строка поиска, то есть надо скрыть или что сделать со строкой поиска, чтоб ее не видно было пока не нажмешь на лупу и строка поиска не выдвинется??=)
Как на сайте [ссылка удалена], только чтоб строка поиска выдвигалась слева от лупы.

Здравствуйте! На том сайте, что вы дали в пример, используется jQuery. Я в jQuery еще пока что не силен!

Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
Вставляю в “searchform.php” этот код:

файл “search.php” тоже есть, но я не знаю, что там нужно менять!
В CSS вставлен:

Нужно указать где находиться обработчик поиска:

Скажите пожалуйста. а как вставить компактно Поиск в меню WordPress, подобно тому как это сделано в темах
Avada
Vantage
Twenty Fourteen
Или в плагине UberMenu.
В теме Avada мне больше всего нравится.
Понятно что там картинка при клике на которую ниже появляется форма поиска.
У вас в теме выезжающая и следовательно она будет перекрывать пункты меню.

Я не понял вопроса! У Вас тема “Avada” и Вы хотите вместо стандартного поиска сделать так, как у меня в примере?

Нет у меня тема не Avada а Fruitful.
_[адрес удален]
Так как хочу сделать предельно простой в навигации блок, то решил отказаться от сайдбаров, а поиск установить правее меню. Но для обычной формы Поиска там места не хватает. Поэтому решил разместить правее корзины миниатюру лупы при клике на которую должна появляться форма Поиска.
Сама корзина не в меню, а просто прижата флоатом.
Рядом с ней также прижато флоатом меню.
Я так понимаю что при клике на миниатюру Поиска через скрипт должен появляться или исчезать div c формой поиска.
Саму форму загнать в Header легко, а вот найти подходящий скрипт не получается.
Второй день роюсь в Интернете.
Как пример рассматриваю сейчас
вот такой метод
_https://tradebenefit.ru/plavnoe-otkrytie-i-skrytie-bloka-div-sredstvami-jquery
По замыслу вместо текстовой ссылки должна быть кликабельная картинка лупы, а во всплывающем диве форма поиска. Также как в теме Avada.
Но что-то пока не получается. Ссылка появляется, но реакции на клик нет

Владимир, попробуйте это сделать следующим образом:
В Вашей теме откройте файл “header.php” и вставьте между этот код:

Теперь, откройте файл, где размещено меню (это может быть в файле header.php) и

Большое спасибо за помощь. В общем то работает. Только Revolution Slider, который присутствует на моём сайте, убивает напрочь.

Здравствуйте!У меня агенство по аренде домов.Очень нужен поисковик ,но не простой ,расширенный.Может подскажете как его сделать.Я мало что понимаю в программировании.

Как вставить поиск на сайт

Если вы часто пользуетесь Интернетом, вы почти наверняка умеете искать и находить страницы в таких поисковых системах, как Google или Яндекс. Все больше и больше пользователей Интернета используют этот способ поиска нужной информации, и все больше – ожидают, что сайты, на которые они попадают, предлагают такую ​​возможность тоже. У вас есть несколько вариантов добавить окно поиска на ваш сайт:

  • Если вы создаете свой сайт на какой-либо CMS, вполне вероятно, что окно поиска уже установлено, и вам не нужно ничего делать;
  • Вы можете установить свой собственный поиск. Есть бесплатные программы, которые вам нужно будет установить. Обычно, это не занимает много времени, но вы должны иметь базовые знания о базах данных и PHP или любом другом языке управления базами данных;
  • Другой вариант – воспользоваться услугами крупных поисковых систем – например, Google.

Использование собственной поисковой системы

Одним из преимуществ использования собственной поисковой системы для вашего сайта является независимость от крупных компаний (Google, Яндекс и т. д.), которые должны проиндексировать ваш сайт, чтобы иметь возможность пользоваться их услугами. Даже если ваш сайт уже проиндексирован, у поисковых систем есть свое расписание для повторной индексации сайтов. Поэтому, вам, возможно, придется подождать некоторое время, чтобы новая страница была проиндексирована и доступна для поиска. Если у вас есть собственный поисковик, вы всегда можете добавить свои новые страницы в список. Конечно, владение поисковой системой также означает полную свободу контролировать отображение результатов. Я предлагаю два примера программ для поисковых систем, но используйте их на свой страх и риск.

  • Sphider: программа очень быстрая и простая в установке. Первоначальная установка выполняется на английском языке, но вы можете изменить язык административной части на русский.
  • Search Engine: на странице результатов отображается имя страницы, адрес и выдержка из текста, в котором появляется поисковый запрос. Вы можете установить период переиндексации вашего сайта, указать слова, которые не индексируются, и многое другое. Программа бесплатна только для некоммерческих сайтов.

Добавление окна поиска Google

Вы можете использовать мощную поисковую систему Google для поиска ключевых слов на вашем сайте. Для этого вам нужно добавить несколько строк в HTML-код вашей страницы.

В следующем примере вы можете искать по во всей сети или только на вашем сайте (в данном случае ravechnost.ru), установив флажок «Искать только на ravechnost.ru»:

<fоrm method=»get» action=»http://www.google.com/search»>

<div style=»border:1px solid blue;padding:5px;width:27em;»>

<table border=»0″ cellpadding=»0″> <tr><td> <input type=»text» name=»q»

size=»25″ maxlength=»255″ value=»» /> <input tуpe=»submit» value=»Google Search» />

<tr><td align=»center» style=»font-size:75%»>

<input type=»checkbox» name=»sitesearch» value=»ravechnost.ru» checked />

Искать только на ravechnost.ru<br />

Результат будет выглядеть так:

Искать только на ravechnost.ru

Чтобы использовать этот пример для своего сайта, просто измените ravechnost.ru на имя вашего сайта. Обратите внимание, что этот метод добавления окна поиска использует базу данных Google. Если Google еще не проиндексировал ваш сайт, окно поиска не будет работать!

Как работает этот код? Приведенный выше пример просто откроет страницу Google и настроит, помимо введенных вами ключевых слов, сайт ravechnost.ru для поиска – результаты будут ограничены только страницами с ravechnost.ru. Конечно, результаты будут отображаться на странице Google.

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

<!— Google Custom Search Element —><div style=»width:100%;»>Поиск</div>

Раскрывающееся окно поиска на HTML и CSS

Раскрывающееся окно поиска на HTML и CSS

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

Также все проверенно на работоспособность:

Красивая форма поиска по сайту

Для начало подключаем шрифт

.korobka <
max-width: 396px;
width: 100%;

>
.korobka .poiskova-stroka <
position: relative;
height: 50px;
max-width: 50px;
margin: auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 25px;
transition: all 0.3s ease;
>
#check:checked

.poiskova-stroka <
max-width: 380px;
>
.poiskova-stroka input <
position: absolute;
height: 100%;
width: 100%;
border-radius: 25px;
background: #efeaea;
outline: none;
border: none;
padding-left: 20px;
font-size: 16px;
>
.poiskova-stroka .amination <
position: absolute;
right: -2px;
top: 0;
width: 52px;
background: #f1ebeb;
height: 100%;
text-align: center;
line-height: 50px;
color: #3c8bec;
font-size: 22px;
cursor: pointer;
border-radius: 30px;
>
#check:checked

.poiskova-stroka .amination <
background: #406dd0;
color: #f1ebeb;
width: 64px;
border-radius: 0 25px 25px 0;
>
#check <
display: none;
>

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

PS — на сайте это не первое окно с аналогичной функцией, что можно найти несколько вариантов, где выбрать тот поиск, который вам покажется удобнее. Хотя все они идут под почти все под аналогичный стиль.

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

поиск для сайта

Сегодня я расскажу вам, как сделать поиск по сайту. Мы рассмотрим основные способы создания поискового механизма на сайте и наглядно попробуем воспользоваться одним из них.

Навигация по статье:

Способы создания поиска на сайте

Если перед вами возник вопрос создания поиска на сайте? Вы можете пойти несколькими путями:

  1. 1. Воспользоваться стандартным механизмом поиска той CMS, которую вы используете.
  2. 2. Воспользоваться плагином или модулем поиска.
  3. 3. Нанять программиста, чтобы он написал модуль поиска для вашего сайта.
  4. 4. Сделать поиск на сайте при помощи специальных сервисов Яндекс.Поиск и системы пользовательского поиска Google.

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

Вариант с программистом, конечно, позволит создать более качественную систему поиска чем стандартные плагины или модули, но до поиска яндекса или Google ему всё же далеко. Да и стоить это будет не дешево.

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

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

Итак, давайте разберемся, как сделать поиск по сайту с помощью специального сервиса одной из поисковых систем.

Поиск для сайта при помощи Яндекс.Поиск

Чтобы сделать поиск для сайта при помощи поисковой формы Яндекс вам нужно:

    1. Зайти на главную страницу сервиса по этому адресу: https://site.yandex.ru. Пройти авторизацию, или, если у вас нет учетной записи в Яндексе, зарегистрироваться. После чего, нажимаем на кнопку «Установить поиск».

Главная страница Яндекс.Поиск

Вводим название будущего поиска

Задаем фильт

добавляем сайт для поиска

вводим адрес сайта

Вводим адрес и нажимаем на кнопку «Добавить».

переходим к следующему шагу

выбираем тип формы

Настраиваем цветовое оформление и шрифт, а так же задаем текст, который будет отображаться в пустом поле формы:

выбираем дизайн формы

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

предпросмотр

настройка страницы результатов поиска

тестирование поиска

код формы поиска

Как добавить код формы поиска на сайт?

Так как у меня сайт сделан на WordPress, я покажу добавление кода формы на его примере.

  1. 1. Заходим в административную часть сайта и переходим в раздел «Внешний вид» =>«Виджеты».
  2. 2. В область сайдбара перетягиваем новый виджет «Текст».

добавляем виджет в сайдбар

добавляем код в виджет

провверяем готовый поиск на сайте

Для других CMS процесс добавления поиска будет выглядеть аналогично. Вы просто вставляете полученный код в том месте, где вам нужно чтобы был поиск.

На этом у меня все. В одной из следующих статей постараюсь рассказать, как сделать поиск по сайту с помощью Google. Если у вас возникнут проблемы – вы всегда можете задать вопрос в комментарии или воспользоваться услугой консультации по Skype. Желаю вам всего хорошего, до новых встреч.

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

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