Як зробити пошук по сайту - робимо гарний пошук по сайту

Як зробити пошук по сайту

Існує стільки сайтів, але як виділиться на тлі інших, як знайти таку «фішку», чим би ваш сайт запам`ятався на тлі інших. Щоб людина згадував сайт і він асоціювався з яким-небудь елементом сайту, який оформлений незвично. І я розповім і покажу як можна з простий пошук на сайті - оформити красиво і оригінально!

Реальний приклад пошуку:

Подивитися прімерСкачать

Уроки про те, як оформити красиво елементи на сайті:

  • CSS3 бібліотека - 40+ ефектів при наведенні
  • Підбірка красивих вкладок
  • Стиль кнопки завантаження
  • Як красиво оформити посилання
  • Приголомшливі ефекти CSS3 при наведенні

За допомогою статей вище ви можете оформити звичайні елементи на сайті оригінальним чином.

Редакція пошук по сайту



Ідея дійсно цікава і полягає в тому, що при натисканні на поле введення з`являється поле для введення на весь екран, а також додаткову інформацію: хто автор, популярні статті та останні статті. Але тут немає динамічного пошуку.

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

Гарний пошук на сайті

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

Редакція пошук

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

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

необхідні файли

висновок

Урок вийшов невеликий, але це якщо не враховувати відео. Думаю, завдяки відео кожен здатний встановити таку форму пошуку на свій сайт. Вона незвичайна і поки що я не бачив сайтів в рунеті, які використовували б такий вигляд форми пошуку. Якщо вам сподобалася ця форма пошуку - спробуйте зробити її на своєму сайті, адже ви зможете прибрати її в будь-який час, якщо вона не приживеться.

Успіхів!

джерело: оригінал

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!