Лого www.SiteHere.ru

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

Существует столько сайтов, но как выделится на фоне остальных, как найти такую «фишку», чем бы ваш сайт запомнился на фоне остальных. Чтобы человек вспоминал сайт и он ассоциировался с каким-нибудь элементом сайта, который оформлен необычно. И я расскажу и покажу как можно из простой поиск на сайте — оформить красиво и оригинально!

Реальный пример поиска:

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

Уроки о том, как оформить красиво элементы на сайте:

С помощью статей выше вы можете оформить обычные элементы на сайте оригинальным образом.

Полноэкранный поиск по сайту

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

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

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

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

Полноэкранный поиск

Видео по установке формы поиска на WordPress

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

Необходимые файлы

Вывод

Урок получился небольшой, но это если не учитывать видео. Думаю, благодаря видео каждый способен установить такую форму поиска на свой сайт. Она необычна и пока что я не видел сайтов в рунете, которые использовали бы такой вид формы поиска. Если вам понравилась данная форма поиска — попробуйте сделать ее на своём сайте, ведь вы сможете убрать ее в любое время, если она не приживется.

 

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Как сделать поиск по сайту — делаем красивый поиск по сайту 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

9 комментариев к записи
  • Сергей

    А как этот поиск поставить на dle, вроде все правильно делаю. Можете рассказать?

     
    • Юрий

      Здравствуйте, Сергей! Ответил Вам на почту.

       
  • Андрей

    Спасибо очень интересно!

     
  • Анатолий

    Хотелось бы узнать, как разместить такой поиск на DLE. Можете и мне рассказать?

     
    • Юрий

      Здравствуйте, Анатолий. Установка на DLE практически не отличается от установки на WordPress. Размещаете скрипты и стили в соответствующих папках своей темы. Затем подключаете все файлы между блоками <head> и </head>. И затем вставляете где нужно форму поиска с соответствующими идентификаторами и классами.

       
  • Тимофей

    Добрый день! А как такой поиск внедрить в сайт на Wix?

     
    • Юрий

      Здравствуйте, Тимофей!
      Можно внедрить и на Wix, но Вам нужен полный доступ ко всем файлам Вашей темы. Затем скачайте исходники и посмотрите как это реализовано в демо. После чего перенесите всё на реальный сайт.

      Я сделал видео, чтобы показать что такой поиск можно сделать на WordPress, но на самом деле его можно сделать на любой CMS.

       
  • Максим

    Добрый день Юрий! скачал шаблон , в каком месте в index.html нужно установить сам поиск , очень нужно , помогите . 

     
    • Юрий Немец

      Здравствуйте, Максим. В конце статьи есть видео по установке на CMS WordPress.

       

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

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