Ноябрь 4, 2019 Запись была обновлена
Как сделать поиск по сайту — делаем красивый поиск по сайту
Существует столько сайтов, но как выделится на фоне остальных, как найти такую «фишку», чем бы ваш сайт запомнился на фоне остальных. Чтобы человек вспоминал сайт и он ассоциировался с каким-нибудь элементом сайта, который оформлен необычно. И я расскажу и покажу как можно из простой поиск на сайте — оформить красиво и оригинально!
Реальный пример поиска:
Посмотреть примерСкачать
Уроки о том, как оформить красиво элементы на сайте:
- CSS3 библиотека — 40+ эффектов при наведении
- Подборка красивых вкладок
- Стиль кнопки загрузки
- Как красиво оформить ссылки
- Потрясающие эффекты CSS3 при наведении
С помощью статей выше вы можете оформить обычные элементы на сайте оригинальным образом.
Полноэкранный поиск по сайту
Идея действительно интересная и заключается в том, что при нажатии на поле ввода появляется поле для ввода на весь экран, а также дополнительная информация: кто автор, популярные статьи и последние статьи. Но здесь нет динамического поиска.
Для этого эффекта использовались переходы CSS, которые и создают анимацию. Тут сразу хочу сказать что данное оформление поиска является экспериментальным и тестировалось только в современных браузерах, которые поддерживают свойства CSS3. На демо форма поиска находится в правом верхнем углу страницы.
При нажатии на форму ввода, появляется белый фон, на котором форма для поиска значительно больше. Плюс к этому выводятся популярные новости и последние статьи.
Видео по установке формы поиска на WordPress
Процесс установки я решил не писать, а снять видео об этом. Я думаю это будет в более понятной для вас форме. Вам лишь нужно просто повторять за мной.
Необходимые файлы
Вывод
Урок получился небольшой, но это если не учитывать видео. Думаю, благодаря видео каждый способен установить такую форму поиска на свой сайт. Она необычна и пока что я не видел сайтов в рунете, которые использовали бы такой вид формы поиска. Если вам понравилась данная форма поиска — попробуйте сделать ее на своём сайте, ведь вы сможете убрать ее в любое время, если она не приживется.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
А как этот поиск поставить на dle, вроде все правильно делаю. Можете рассказать?
Здравствуйте, Сергей! Ответил Вам на почту.
Спасибо очень интересно!
Хотелось бы узнать, как разместить такой поиск на DLE. Можете и мне рассказать?
Здравствуйте, Анатолий. Установка на DLE практически не отличается от установки на WordPress. Размещаете скрипты и стили в соответствующих папках своей темы. Затем подключаете все файлы между блоками <head> и </head>. И затем вставляете где нужно форму поиска с соответствующими идентификаторами и классами.
Добрый день! А как такой поиск внедрить в сайт на Wix?
Здравствуйте, Тимофей!
Можно внедрить и на Wix, но Вам нужен полный доступ ко всем файлам Вашей темы. Затем скачайте исходники и посмотрите как это реализовано в демо. После чего перенесите всё на реальный сайт.
Я сделал видео, чтобы показать что такой поиск можно сделать на WordPress, но на самом деле его можно сделать на любой CMS.
Добрый день Юрий! скачал шаблон , в каком месте в index.html нужно установить сам поиск , очень нужно , помогите .
Здравствуйте, Максим. В конце статьи есть видео по установке на CMS WordPress.
Добрый день. Скажите, а можно ли поставить такой поиск на Joomla 3? Заранее благодарен за ответ.
Добрый день, Игорь!
Вы можете установить данный поиск на любую CMS. Но это не готовое решение для Joomla, вам необходимо самостоятельно внедрить его.
Вы имеете в виду, что компонент поиска нужно ставить отдельно, а потом на него "одевать" данную "оболочку"?
Да, вы все верно понимаете.
Большое спасибо за ответ! И вообще, спасибо за Вашу работу, очень полезный и крутой сайт.
Спасибо! Статьи новые давно не писались, но в ближайшее время это исправлю.