
поту как
Быстро организовать поиск по сайту можно используя, готовую систему пользовательского поиска (СПП) от Google Inc. Зная необходимые селекторы, с помощью CSS, изменить дизайн поисковой строки и кнопки поиск в форме на собственный подходящий к общему оформлению.
Данный пост подробно содержит подробное описание и примеры того, как разместить поисковую строку от Гугла в меню сайта или блога и легко изменить ее внешний вид при помощи CSS.
Для того, чтобы установить поисковую систему от Google на сайт, необходимо зарегистрироваться на сайте Google CSE.
Далее создать новую систему поиска для своего сайта:

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

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

В итоге получаем два кода - скрипт, который загружает поисковую форму и HTML-тег, в который будет загружаться форма.
<script> (function() { var cx = 'много цфр и бкв...'; /*идентификатор вашей системы*/ var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.ru/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script><gcse:search></gcse:search>/*тег-контейнер*/
Как добавить поисковую строку Google в меню
Чтобы разместить поисковую строку в блоке или в одном из разделов горизонтального или вертикального меню, достаточно в нужный блок добавить тег-контейнер, который был получен вместе со скриптом поисковой системы Гугла.
В итоге код будет выглядеть примерно так:
<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><gcse:search></gcse:search></li> <!--тег контейнер СПП--> </ul>
Чтобы в дальнейшем упростить работу с оформлением и расположением, лучше обернуть тег поиска в дополнительный блок, и присвоить ему отдельный класс, например - .search-row. Так будет удобнее вносить изменения в CSS именно для него.
Форма подгоняется автоматически относительно к ширины родительского блока
Форма подгоняется автоматически относительно к ширины родительского блока
Как изменить дизайн формы пользовательского поиска от Google
Как было показано выше, для размещения поисковой строки на сайте достаточно разместить специальный тег в нужном месте, все остальные HTML-элементы формы поиска и стандартные стили оформления, будут загружены скриптом, что называется, "налету". Однако это не мешает пользователям изменить дизайн формы поиска по собственному усмотрению, применяя собственный CSS, хотя и создает некоторые, вполне решаемые трудности.Кстати сказать, используя приведенный ниже пример, можно без труда изменить оформление Blogger-гаджета "Окно поиска", который, по-сути, использует ту же самую СПП от Google.
Чтобы добавленный к СПП персональный CSS был применен правильно, в некоторых случаях, к значениям свойств нужно будет добавить параметр !important.
А селекторы лучше прописывать с учетом тегов и селекторов родителя:
Пример современного оформления формы поиска для сайта от Google, с анимированным появлением поисковой строки и прочими современными наворотами.А селекторы лучше прописывать с учетом тегов и селекторов родителя:
[тег родителя].[класс] [тег элемента].[класс] { /*свойства стилей*/ }
HTML структура блока:
<div id="Пример простого CSS:search-row" class="search-row"><gcse:search></gcse:search></div>
/*основной блок*/ #search-row { margin: 2% 27%; min-height: 48px; } /*обнуляем все что только можно*/ form.gsc-search-box * { background: transparent; border: 0; padding: 0; margin: 0; outline: 0; box-sizing: content-box; } form.gsc-search-box { border-style: none; border-width: 0; border-spacing: 0 0; width: 100%; margin-bottom: 2px; } .gsc-input-box { border: 1px solid #D9D9D9 !important; } div.gsc-control-cse, form.gsc-search-box, table.gsc-search-box { position: relative; } /*если хочется анимируем элементы*/ form.gsc-search-box *, form.gsc-search-box *::before { transition: all ease 1s; padding: 0 !important; } /*добавим надпись на инпуте о том, что это поиск*/ .gsc-input-box::before { content: 'Search...'; color: #999; position: absolute; top: 10px; left: 5px; font-size: 32px; } /*изменим надпись при наведении на форму поиска*/ form.gsc-search-box:hover .gsc-input-box::before { content: 'Ask me!'; } /*стили для поля запроса*/ td.gsc-input > .gsc-input-box input { position: relative; background: transparent !important; background-image: none !important; padding: 0 5px !important; border: none; border-bottom: 5px solid transparent; color: #000; cursor: pointer; font-size: 32px; min-height: 48px; width: 97% !important; } td.gsc-input:hover > .gsc-input-box input { border-bottom: 5px solid #BBBABA; color: #000; cursor: text; margin-left: 0; } /*инпут в фокусе при введении запроса*/ td.gsc-input > .gsc-input-box input:focus { border-bottom: 5px solid #BBBABA; background-color: #fff !important; color: #000; cursor: text; width: 98%; margin-left: 0; } /*кнопка с лупой для отправки запроса*/ td.gsc-search-button > .gsc-search-button-v2, td.gsc-search-button > .gsc-search-button-v2:focus { background-color: #4d90fe !important; display: block; outline: none !important; background-position: 50% 50%; background-color: transparent; font: normal normal 0 sans-serif; color: transparent; border: 8px solid transparent; padding: 0 !important; height: 34px; min-width: 34px; width: 34px; } td.gsc-search-button > .gsc-search-button-v2:hover { background-color: #AECEF5 !important; } .gsc-search-button-v2 > svg { -ms-zoom: 2.5; transform: scale(2.5); } /*скрываем все лишнее*/ .gsc-branding, .gcsc-branding, td.gsib_b { display: none; }В итоге должно получится так:
ПРИМЕР
P.S. Пример желательно смотреть через современные браузеры, потому как для "старичков" я особо не заморачивался.
На этом все. Дальнейшие изыскания целиком зависят от фантазии соискателей и знаний полученных ими при изучении свойств каскадных таблиц стилей.
Прекрасно! Будем пробовать сегодня!
ОтветитьУдалитьСпасибо! Прочел.
ОтветитьУдалитьСкажи, пожалуйста, для кнопки реально реализовать такой эффект (внизу слева кнопки социальных сетей - при наведении перекатываются Пример). Там спрайт используется. У меня на сайте также реализовано. Хочу расположить поиск рядом, хотелось бы, чтобы и кнопка так реагировала при наведении. Но получается у меня такое только для ссылок. Уже несколько часов бьюсь и никак. Ты в CSS лучше меня шаришь.
Тут все просто, такие же стили применяешь, только к кнопке. Но вот собственно тебе, твой готовый CSS, даже спрайт тебе сделал :), только к себе перезалешь чтобы когда удалю его не пропал у тебя.
Удалить3.bp.blogspot.com/-q1bs9vyvFHI/USvKHN-hVWI/AAAAAAAAFQo/Jge56ZVFSao/s1600/sw-(2).png
:
input.gsc-search-button {
background: url('.../sw-(2).png') 0 0 no-repeat #000 !important;
font: normal normal 0px sans-serif !important;
color: transparent !important;
border: 1px solid #666 !important;
height: 30px !important;
width: 30px !important;
min-width: 30px !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input.gsc-search-button:hover {
background: url('.../sw-(2).png') 0 -32px no-repeat #00baff !important;
border: 1px solid #E6E6E6;
height: 30px !important;
width: 30px !important;
}
Размеры картинки 32х32, а тебя там все по 30 пикселей, если что обрежешь, но и так, вроде, нормально становится
Вопрос по окошку с результатами поиска, можете пару примеров стилей показать, а то по тому же принципу не получается его изменить. Вот класс основного контейнера gsc-results-wrapper-overlay gsc-results-wrapper-visible
ОтветитьУдалитьДля начала обозначим что это два селектора, а не один. И если вы читали статью внимательно, то, скорее всего, прочли рекомендацию указывать дополнительно родителя и тег элемента к которому хотите применить свойство, попробуйте сделать это. Например, запишите так:
Удалитьdiv.gsc-results-wrapper-overlay {
background: #000;
}
или так:
div.gsc-control-wrapper-cse div.gsc-results-wrapper-overlay {
background: #000;
}
Прекрасная статья!
ОтветитьУдалитьА не подскажите, как сделать чтоб при клике на результат поиска (результаты поиска показываются на сайте а не на гугловсой странице) - пост открывался в той же вкладке а не в новой?
Это опция есть в стандартных настройках - результаты во фрейм-окне, как здесь.
УдалитьСпасибо за интересную статью! Может подскажите, как сделать, чтобы при поиске URL менялся и содержал поисковый запрос? Дело в том, что у нас телефонный справочник раньше брал данные из этого URL при поиске и параллеьно с гуглом выполнял свой поиск. А сейчас URL не меняется, и естественно функция тел. справочника не работае :(
ОтветитьУдалитьНет, этого я не знаю, скорее всего что-то поменялось в самом скрипте, доступ к нему есть в средствах разработчика, но там там я еще не копашился.
УдалитьСпасибки!)
ОтветитьУдалитьСтатья супер гуд! Но есть вопрос, а за такое гугл не наказывает? И ещё вопросик, а лупу убрать с кнопки можно каким-то образом? Спасибо!
ОтветитьУдалитьРасширять настройки и оформление формы поиска не запрещено, это предлагает сам Гугл, и в админ-панели GCSE имеется соответствующая надпись (на скриншоте №4 на это указано). Поиск в меню данного блога, это тоже поиск от Гугл.
УдалитьЛупа - это фоновая картинка, добавляется она самостоятельно (если помните, по умолчанию на кнопке красуется надпись "Поиск"), вместо нее вы можете поместить любое желаемое изображение или не помещать ничего вовсе. Это все магия CSS =)
Этот комментарий был удален администратором блога.
ОтветитьУдалитьОчень приятно что статья вам пригодилась, но в подобных случаях используйте пожалуйста email, ссылка "Контакты" в "подвале".
УдалитьСпасибо... толковая и доходчивая статья
ОтветитьУдалитьБольшое спасибо за статью, очень помогла! Намучался я с этим Google, а другой поиск ставить не хотел. Не оскудеет земля русская талантами! :)
ОтветитьУдалитьОгромное спасибо за рекомендацию "Инструментов разработчика". Благодаря им настройка внешнего вида СПП действительно становится простой задачей.
ОтветитьУдалитьИ вам спасибо за отзыв. Данная статья ожидает обновления, заходите на днях, после обновления будет еще интереснее.
УдалитьЭто то, что я так давно искал!
ОтветитьУдалитьСпасибо.
Подскажите, как настроить элемент placeholder? Так чтобы он не конкурировал с параметром по умолчанию. У вас в образце он вообще не настроен..
ОтветитьУдалитьplaceholder для GSE настраивается с помощью стандартных костылей:
Удалитьtd.gsc-input > input.gsc-input::-webkit-input-placeholder {font-size: 0;color: transparent}
td.gsc-input > input.gsc-input::-moz-placeholder {font-size: 0;color: transparent}
td.gsc-input > input.gsc-input:-moz-placeholder {font-size: 0;color: transparent}
td.gsc-input > input.gsc-input:-ms-input-placeholder {font-size: 0;color: transparent}
Уважаемый автор, здравствуйте,
ОтветитьУдалитьПодскажите пожалуйста, каким образом можно расположить изображение по центру всплывающего pop-up окна, появляющегося при активации поискового запроса? Демонстрация этого окна представлена в Вашем примере. Какой класс нужно применить для того, чтобы прописать соответствующие условия?
Благодарю Вас.