Scroll

Как добавить пользовательский поиск в шаблон MotoCMS 3?

Обратите внимание! Вы можете использовать пользовательский поиск только для "живого" сайта. Пользовательский поиск не будет работать, если вы используете демо-шаблон, временное доменное имя или режим "В процессе разработки".

Пользовательский поиск от Google позволяет создать поисковую систему для вашего сайта. С помощью пользовательского поиска, вы можете создавать собственные поисковые системы по заданной коллекции сайтов или страниц. Чтобы добавить пользовательский поиск необходимо выполнить следующие действия.

1. На главной странице Системы пользовательского поиска Google нажмите Создать систему пользовательского поиска.

2. В поле Сайты, на которых выполняется поиск добавьте ресурсы, которые нужно охватить вашей поисковой системой. Это могут быть любые сайты, а не только те, которые принадлежат вам. Добавлять можно как отдельные страницы, так и целые ресурсы.

3. Название вашей поисковой системы будет создано автоматически на основе выбранных ссылок. Кроме того, его всегда можно изменить.

4. Выберите язык поисковой системы. Этот параметр определяет язык интерфейса поисковой системы, но не влияет на фактические результаты.

5. Нажмите кнопку Создать

6. Затем нажмите на кнопку Получить код

7. Перейдите в раздел Настройка

8. Нажмите Внешний вид на боковой панели, а затем выберите макет Накладка

9. Далее необходимо нажать Сохранить и получить код.

10. Далее необходимо разместить виджет Встроенный код на страницу, где будет располагаться поиск. Затем вставить код в поле Вставьте HTML код. После этого добавьте следующие строчки после кода поиска, который был добавлен:

<style>

    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>

11. Теперь у вас добавлен пользовательский поиск от Google на странице

Примечание: Мы не можем гарантировать корректную работу пользовательского поиска, если вы используете другой исходный код или настройки.

 

Данная часть инструкции поможет Вам изменить внешний вид Вашего виджета поиска

Изменить внешний вид виджета можно путем изменения кода, который Вы добавили в 10-м шаге этой инструкции. Для этого необходимо добавить код перед тэгом </style>.

а) Для изменения цвета фона и рамки поискового виджета добавьте следующий код

.gsc-control-cse {
border-color: #FFFFFF;
background-color: #FFFFFF;

}

б) Для изменения цвета кнопки поиска при наведении на неё следует добавить код

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;

}

.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}

в) Для изменения цвета рамки кнопки поиска при наведении на неё следует добавить код

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #FFFFFF;

}

г) Для изменения цвета фона окна с результатами поиска следует добавить код

.gsc-results-wrapper-overlay {
background: #FFFFFF;

}

д) Для изменения цвета фона блока с поисковыми результатами следует добавить код

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
background-color: #FFFFFF;

}

 

Код #FFFFFF следует заменить на желаемый цветовой код, чтобы добавить нужный цвета.

Например, для изменения цвета фона поискового виджета и цвета кнопки поиска необходимо добавить код из пунктов а) и б) перед тэгом </style> в коде из десятого шага.

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

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>

После внесения редакций для изменения цвета код будет выглядеть следующим образом:

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}

.gsc-control-cse {

border-color: #FFFFFF;
background-color: #FFFFFF;

}

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;

}

.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}

</style>

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk