Размещение и дизайн пользовательского поиска от Google (gcse)

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

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

  Далее создать новую систему поиска для своего сайта:

Скриншот страницы регистрации поисковой системы Google для своего сайта

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



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


  В итоге получаем два кода - скрипт, который загружает поисковую форму и 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="search-row" class="search-row"><gcse:search></gcse:search></div>
 Пример простого CSS:
/*основной блок*/
#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. Пример желательно смотреть через современные браузеры, потому как для "старичков" я особо не заморачивался.

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

22 комментария:

  1. Прекрасно! Будем пробовать сегодня!

    ОтветитьУдалить
  2. Спасибо! Прочел.
    Скажи, пожалуйста, для кнопки реально реализовать такой эффект (внизу слева кнопки социальных сетей - при наведении перекатываются Пример). Там спрайт используется. У меня на сайте также реализовано. Хочу расположить поиск рядом, хотелось бы, чтобы и кнопка так реагировала при наведении. Но получается у меня такое только для ссылок. Уже несколько часов бьюсь и никак. Ты в CSS лучше меня шаришь.

    ОтветитьУдалить
    Ответы
    1. Тут все просто, такие же стили применяешь, только к кнопке. Но вот собственно тебе, твой готовый 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 пикселей, если что обрежешь, но и так, вроде, нормально становится

      Удалить
  3. Анонимный19.04.2013, 12:09

    Вопрос по окошку с результатами поиска, можете пару примеров стилей показать, а то по тому же принципу не получается его изменить. Вот класс основного контейнера gsc-results-wrapper-overlay gsc-results-wrapper-visible

    ОтветитьУдалить
    Ответы
    1. Для начала обозначим что это два селектора, а не один. И если вы читали статью внимательно, то, скорее всего, прочли рекомендацию указывать дополнительно родителя и тег элемента к которому хотите применить свойство, попробуйте сделать это. Например, запишите так:
      div.gsc-results-wrapper-overlay {
      background: #000;
      }
      или так:
      div.gsc-control-wrapper-cse div.gsc-results-wrapper-overlay {
      background: #000;
      }

      Удалить
  4. Анонимный26.06.2013, 13:46

    Прекрасная статья!
    А не подскажите, как сделать чтоб при клике на результат поиска (результаты поиска показываются на сайте а не на гугловсой странице) - пост открывался в той же вкладке а не в новой?

    ОтветитьУдалить
    Ответы
    1. Это опция есть в стандартных настройках - результаты во фрейм-окне, как здесь.

      Удалить
  5. Спасибо за интересную статью! Может подскажите, как сделать, чтобы при поиске URL менялся и содержал поисковый запрос? Дело в том, что у нас телефонный справочник раньше брал данные из этого URL при поиске и параллеьно с гуглом выполнял свой поиск. А сейчас URL не меняется, и естественно функция тел. справочника не работае :(

    ОтветитьУдалить
    Ответы
    1. Нет, этого я не знаю, скорее всего что-то поменялось в самом скрипте, доступ к нему есть в средствах разработчика, но там там я еще не копашился.

      Удалить
  6. Анонимный09.01.2014, 20:29

    Статья супер гуд! Но есть вопрос, а за такое гугл не наказывает? И ещё вопросик, а лупу убрать с кнопки можно каким-то образом? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Расширять настройки и оформление формы поиска не запрещено, это предлагает сам Гугл, и в админ-панели GCSE имеется соответствующая надпись (на скриншоте №4 на это указано). Поиск в меню данного блога, это тоже поиск от Гугл.
      Лупа - это фоновая картинка, добавляется она самостоятельно (если помните, по умолчанию на кнопке красуется надпись "Поиск"), вместо нее вы можете поместить любое желаемое изображение или не помещать ничего вовсе. Это все магия CSS =)

      Удалить
  7. Андрей22.01.2014, 22:37

    Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Очень приятно что статья вам пригодилась, но в подобных случаях используйте пожалуйста email, ссылка "Контакты" в "подвале".

      Удалить
  8. Анонимный14.05.2014, 10:41

    Спасибо... толковая и доходчивая статья

    ОтветитьУдалить
  9. Большое спасибо за статью, очень помогла! Намучался я с этим Google, а другой поиск ставить не хотел. Не оскудеет земля русская талантами! :)

    ОтветитьУдалить
  10. Анонимный16.10.2016, 21:45

    Огромное спасибо за рекомендацию "Инструментов разработчика". Благодаря им настройка внешнего вида СПП действительно становится простой задачей.

    ОтветитьУдалить
    Ответы
    1. И вам спасибо за отзыв. Данная статья ожидает обновления, заходите на днях, после обновления будет еще интереснее.

      Удалить
  11. Это то, что я так давно искал!
    Спасибо.

    ОтветитьУдалить
  12. Анонимный01.02.2018, 02:20

    Подскажите, как настроить элемент placeholder? Так чтобы он не конкурировал с параметром по умолчанию. У вас в образце он вообще не настроен..

    ОтветитьУдалить
    Ответы
    1. 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}

      Удалить
  13. Анонимный04.02.2020, 01:45

    Уважаемый автор, здравствуйте,

    Подскажите пожалуйста, каким образом можно расположить изображение по центру всплывающего pop-up окна, появляющегося при активации поискового запроса? Демонстрация этого окна представлена в Вашем примере. Какой класс нужно применить для того, чтобы прописать соответствующие условия?

    Благодарю Вас.

    ОтветитьУдалить

Следующее Предыдущее

BestProject