• 1714
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Сегодня в поисках интересного материала набрел на сайт в поиске которого работает голосовой поиск ,ну я давай сразу гуглить и нашел статейки как поставить голосовой поиск на сайт.И сейчас мы поставим его себе на сайт.
И так приступим
1.Идем в папку шаблона и открываем файл search.form.tpl
2.Ищем там строчку примерно такую

Код:
<input type="search" placeholder="Поиск…" value="" name="search" />
это наше поле поиска
3.Меняем это поле на вот это изменёное
Код:
<input type="search" placeholder="Поиск…"  name="search" x-webkit-speech="" speech=""/>
мы просто добавили x-webkit-speech="" speech=""
4. Сохраняем и любуемся голосовым поиском
5.Также можно добавить автоматическое отправление по распознаванию поискового запроса.Это будет выглядеть так
Код:
<input type="search" placeholder="Поиск…"  name="search" x-webkit-speech="" speech="" onwebkitspeechchange="this.form.submit();"/>
Но лучше всего оставить возможность отредактировать неправильно распознаный поисковый запрос пользователю.
6.Также можно изменить стиль нашего микрофончика в поле поиска по умолчанию у кнопки такие стили
Код:
input::-webkit-input-speech-button {
-webkit-appearance: -webkit-input-speech-button;
display: inline-block;
}
Пример с изменением картинки
Код:
input::-webkit-input-speech-button {
-webkit-appearance: button;
background: url('../img/mikrofon.png') no-repeat;
width: 10px;
height: 10px
float: right;
}
Картинку заливаете свою прописываете свой адрес до картинки
7.По умолчанию, Google берет данные о языке распознавания исходя из выбранного языка в Google Chrome, но и здесь можно все изменить добавив метатег
Код:
<meta http-equiv='Content-Language' content='ru_RU' />
8.Ну вроде все,надеюсь не утомил tongue

Можешь почитать и вот эту статейку "Добавляем к себе на сайт,легкий,простой ,адаптивный слайдер"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

какой форум лучше для вас
Результаты

----