Как установить поиск яндекс на сайт и предать ему красивый вид

Всем привет, на связи Евгений Смецкий, долго решался на данный пост, но все таки начал писать. Так как многие задаются вопросом «как установить поиск от Яндекса или Google и придать ему красивый вид» много где я вижу на страницах своих друзей блогеров, поиск от Google а кто ставит и Яндекса, каждый выбирает тот поиск, который ему больше по душе.

У меня раньше был всегда такой вопрос, как блогеры делают красивые поиски?. Я не мог понять и найти ответ на свой вопрос, потому что когда я заходит на site.yandex.ru и пытался что-то слепить красивое, то у меня ничего не получалось.

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

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

И перед тем как писать эту статью, я сделал вот такой себе поиск:

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

Яндекс поиск установить на сайт

Для того чтобы вам это сделать, необходимо точно знать, индексируется ли ваш сайт поисковыми системами. Чтобы проверить сайт, на индексацию ПС, в пишите в поиске site:www.smetskiy.com, соответственно пропишите ваш сайт за месть моего, заметьте что после site: пробела не должно быть. Если у вас появились страницы в поиске, значит можно смело переходить к установке поиска, если ничего не появилось, то вам нужно зарегистрировать сайт на Яндексе, и после нескольких недель ваш сайт будет добавлен.

Переходим по ссылке site.yandex.ru и нажать на кнопку Установить поиск:

Откроется первое окно, где вам нужно прописать название ! Подробнее смотрите на картинке ниже :

Основные поля отмечены звездочкой, особое внимание «Область поиска» здесь нужно прописать ваш сайт нажав на кнопку «Добавить сайты и исключение».

Далее переходим ко второму шагу. Выберите тип формы, затем дизайн поисковой формы, я сделал вот так:

Посмотрели как будет выглядеть и переходим к третьему шагу «Результаты поиска»

Выбираем где показывать результаты, я предпочитаю на странице своего блога, по этому выбираю «Показывать результаты на моей странице» и прописываю адрес на какой странице будут отображаться результаты. Если у вас нет такой страницы значит вам нужно её создать, переходим в админ панель блога Страница/Добавить новую и создаем, затем просто скопируйте url и вставьте его в данное поле. Если у вас сайт не очень широкий, то поставьте галочку в подпункте «показывать рекламы и результаты поиска в одну колонку»

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

И самый последний пункт это код для вставки на сайт. Я предлагаю преступить сначала к коду который будет выводить результаты. Идем в редактирование Страниц и заходим на ту которую вы создавали для результатов поиска и в Текстовом редакторе вставляем код результатом и сохраняем.

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

Красивый вид поиска Яндекс

Теперь самое главное, это предать красивый вид. Для начала нужно сделать или скачать картинку поиска с интернета, зачем это надо ? Если посмотреть подробнее на мой поиск, то вы увидите то что под ним изображение, то есть фон. Нам нужно сделать задний фон, у меня он выглядит вот так :

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

То что выделено красным жирным , вам нужно дописать к току коду который дали вам на 5 шаге «код формы поиска» и сохранить.

Далее осталось только прописать стили в нашем файле style.css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* Поиск на сайт Яндекс 
------------------------------------------*/  
.yandexform{
background: url(http://www.smetskiy.com/wp-content/uploads/2014/12/5651.png) no-repeat top left;
background-position: .01em 50%;
}
 
#ya-site-form0 .ya-site-form__submit {
border: 0 !important; /* отсутствие рамки */
background: none !important; /* прозрачный фон */
cursor:pointer; /* курсор в виде руки */
}
#ya-site-form0 .ya-site-form__input-text {
border: 0 !important;
font: 12px verdana, arial; /* размер, шрифт поля формы */
}
#ya-site-form0 .ya-site-form__search-input {
padding: 5px 5px 5px 9px !important; /* отступы внутри поля */
}

Теперь там где background, пропишите ссылку на вашу картинку и сохраните.

Ели что-то будет криво или где-то вылазить у вас в стилях есть padding где изменяя эти значения вы сможете выровнять все !

Вот и все, и напоследок такой вопрос ко всем:

Какой поиск вы предпочитаете и почему ?

Внимание !

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

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

Полезные статьи

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

С уважением Евгений Смецкий