Здравствуйте дорогие читатели моего блога. Сегодня у меня было вдохновение написать хороший пост, но я не знал о чем именно писать. Хочется писать посты о том, что вас сильно бы интересовало. Отсылайте мне письма через форму обратной связи, предлагайте темы, которые вы хотели бы видеть на моем блоге. Буду рад с вами держать связь через e-mail. Спасибо.
Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Вы должны понимать, что любая форма без обработчика работать не будет, другими словами сказать, не будет выдавать задаваемый результат. Наверное я вас запутал?! Я не специально, так просто получилось.
Простой поиск для сайта.
Это простая форма поиска, без всяческих наворотов. Само название "простой поиск для сайтов" говорит само за себя.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action="">
<input class="search-text" ENGINE="text" name="s" id="s" value="Поиск..." onfocus="if (value == 'Поиск...') {value = ''}" onblur="if (value == '') {value = 'Поиск...'}" />
<input class="search-btn" type="submit" value="ok" />
</form>
Форма поиска с подсветкой.
Сама форма для ввода поиска имеет серый фон, но при нажатии для написания текста в поле поиска, серый фон исчезает.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action=""> <input onblur="this.value=(this.value=='')?this.title:this.value;this.style.backgroundColor='#ccc';" onfocus="this.value=(this.value==this.title)?'':this.value;this.style.backgroundColor='#fff';" value="Поиск" title="Поиск" type="text" style="text-align: center; background-color: #ccc;" /> <input class="search-btn" type="submit" value="ok" /> </form>
Простая, но красивая форма поиска.
В этой форме поиска используется картинка. Вы можете подставить свою любую картинку, которую захотите.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action=""> <input name="nomer2" value="" size="20" type="text" style=" color: rgb(255, 255, 255); border: 2px solid rgb(100, 117, 134); padding: 5px 2px 5px 30px; background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102); "> </form>
background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
- я выделил красным картинку, которую вы можете смело поменять.
Резиновая форма поиска.
Почему именно резиновая форма? Да потому, что при нажатии на форму, поле ввода растягивается по ширине на столько, сколько вы прописали в коде.
.......до нажатия
......и после нажатия формы поля
<html>
<head>
<style>
.form-search {
display: inline-block;
background: -moz-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -ms-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -o-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -webkit-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
border-radius: 5px;
padding: 4px;
}
.form-search input {
width: 75px;
height: 32px;
line-height: 32px;
font: 13px Helvetica, Arial, sans-serif;
color:#6E7074;
text-shadow: 0 1px 0 #FFF;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
padding: 0 30px 0 6px;
background-image: url("search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -webkit-linear-gradient(#BCBCBC, #EBEBEB);
background-repeat: no-repeat;
background-position: 100% 50%, 100% 100%;
border: 1px solid #747474;
border-radius: 3px;
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
}
.form-search input:focus {
width: 160px;
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #25464D;
background-image: url("search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);
}
</style>
</head>
<body>
<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/>
</form>
</body>
</html>
search.png - это картинка, вы можете поменять на свою.
.form-search input - параметры в CSS до нажатия,
width: 75px; - ширина поля,
height: 32px; - высота поля,
.form-search input:focus - параметры в CSS после нажатия,
width: 160px; - ширина поля после нажатия.
Красивая форма поиска.
В этой форме не используется картинка. Все сделано на чистейшем CSS.
<html>
<head>
<style>
.searchform {
display: inline-block;
zoom: 1;
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
</style>
</head>
<body>
<form class="searchform">
<input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
<input class="searchbutton" type="button" value="Да" />
</form>
</body>
</html>
Вот и все формы поиска, что я хотел выложить на блоге. Если что-то будет интересное, я обязательно выложу... я не жлоб, хотя...... не, точно не жлоб. Удачи!!!
Есть вопросы, предложения, идеи?!! Пишите в комментариях.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
13 красивых CSS эффектов для изображений
Как сделать кнопку «Наверх» для HTML-сайта
Как сделать в input type кнопки «+» и «-» по бокам
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274711 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222615 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187975 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
Здравствуйте, Степан! С удовольствие почитала статью и подписалась на ваш блог. Я как раз разбиралась с формами на html5 и тут так вовремя набрела на вашу статью. Спасибо Вам. У вас очень красивый дизайн. Успехов вам и благополучия, вам и вашей семье.
Спасибо!!! Приятно. Рад, что моя статья вам пригодилась.
Красивые формы поиска, а как сделать обработчик формы для WordPress?
Спасибо 
А откуда резиновая форма поиска берет картинку? Я имею ввиду, если не менять CSS свойства? На моем сайте такой картинки нет и на ваш вроде не ведет…
Если я вас правильно понял, вы не можете установить на сайт резиновую форму поиска?
Вы можете скачать готовы исходный код с картинкой. Для этого нажмите скачать.
Вот картинка с примера https://bloggood.ru/wp-content/lessons/serch/serch-demo/4/search.png
В коде пункт 41-44.
background-image: url(“search.png”), -moz-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -ms-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -o-linear-gradient(#9CC2CA, #DFECEF);
background-image: url(“search.png”), -webkit-linear-gradient(#9CC2CA, #DFECEF);
Картинка должна разместится в корне сайта. Если сделать вот так: images/search.png, тогда картинку нужно разместить в папку images.
Если что-то не получается или я вас не так понял, пишите, помогу.
Нет, в коде я разобрался и форму поставил, мне интересно, если взять код из статьи, тогда картинка подгружаться будет с вашего сайта?
Не, это я туплю))))Все понял что надо картинку все таки закачать))))) Вчера ночью смотрел код, спать хотел и тупил)))))
Если использовать код так, как в примере в статье, картинка будет грузиться с вашего сайта. Картинку нужно загрузить в корень сайта. Если захотите картинку загрузить в любую папку сайта, тогда везде, где в CSS прописана картинка search.png укажите путь к папке. Вот так (название папки/search.png).
Правильно Сергей вы поняли.
Добрый день,
Я установила на сайт вашу форму поиска, но она не работает. Т.е. форма поиска видна на сайте, но найти что-либо через неё не возможно. Как это исправить?
Здравствуйте Ирина. Это всего лишь форма для поиска и не более. К этим формам поиска следует подключить скрипт который будет обрабатывать поиск. Если вы используете движок CMS, тогда с “поиском” проблем не должно быть. Какой движок используете вы? Если WordPress, тогда запросто расскажу, как подключить форму поиска.
Пишите, хочу Вам помочь.
Степан, да я использую wordpress
Ирина, посмотрите, есть ли на вашем шаблоне такие файлы:
Результаты поиска (search.php), Форма поиска (searchform.php)?
Есть оба эти файла.
Форму поиска скопируйте в файл (searchform.php). Скопируйте полностью этот код и вставьте его в файл searchform.php.
Все остальное в этом файле должно быть удаленно. Но советую сделать резервную копию в начале.
Напишите результат.
Полностью заменила на код, котрый вы сказали, но что-то не работает
Установите этот код в файле “header.php”.
Это код вывода формы поиска.
Поставила, но пока никаких изменений.
Кстати, форму поиска вы можете поставить и через виджет “ПОИСК – Форма поиска для вашего сайта”.
Давайте я с вами спешусь через почту? Постараюсь разобраться в чем проблема.
да, давайте спишемся в почте. Я буду вам очень признательна за помощь.
Здравствуйте. Подскажите, почему в варианте формы поиска с лупой, эта самая лупа не отображается? Как это можно исправить?
А еще подскажите, можно ли у вас на блоге почитать, о том, как сделать форму комментирования записей со смайликами и добавить фон (в вашем случае линовка),
Здравствуйте еще раз. И еще возник вопрос. Все установилась, картинка, как мне нравится, но поиска по сайту не происходит. Что не так?
Здравствуйте Анастасия. Спасибо вам за комментарии.
Чтобы производился писк по сайту, нужен еще дополнительно скрипт. Вы используете движок WordPress или создаете сайты ручным способом (HTML)? Если вы используете WordPress, могу помочь.
Спасибо за быстрый ответ.
Я использую WordPress.
Здравствуйте. Чтобы отображалась лупа в поиске, нужно прописать правильно путь к картинке с лупой.
Если я вас правильно понял,то по поводу комментариев со смайликами вы можете почитать тут
Да, именно это! Спасибо!
в файле “searchform.php” найдите строку с <form> и замените на такой код
Если плохо объяснил, скажите, какой вы поиск выбрали из статьи.
Степан, дело в том, что у меня нет в теме этого файла вообще. И я не вижу никакого кода.
В том файле в котором вы поставили код формы поиска нужно прописать “action”.
Например, у меня в статье вы видите вот такой код:
ЗАМЕНИТЕ первую строку на вот такую:
К сожалению, описанные вами ниже действия не помогли.
Если вы мне доверяете, можете дать доступ в админ-панель. Я попробую исправить. Если согласны, тогда я вам отпишу на почту.
Боюсь, у меня нет выбора
Гигантская проблема с поиском.. Установила на 404.php. Но поиск осуществляется конкретно на этой несуществующей странице с результатом: Нет результатов для поиска. Как мне быть? В хедэре уже есть форма, она работает и на 404, и на сайте, но в 404.php ваша форма не идет(
Расскажите подробней, какую форму вы устанавливали? Ирина, если Вы просто скопировали и вставили готовый код формы поиска, то этого не достаточно. Она не будет работать без обработчика. Почитайте комментарии. Если далее не будет получаться, пишите, помогу.
Использую простую, но красивую форму поиска. Вордпресс. Почитала все комменты к посту, все попробовала, но результаты поиска не обрабатываются. Меня редиректит на главную без результатов(
Ира, меня интересовал более подробный ответ – Вы использовали форму из моего сайта? Если да, то какую по счету. А лучше скиньте в комментарий код формы поиска, так, как вы используете ее. Посмотрю, насколько правильно вы ее используете.
Писала название, как у вас на сайте написано. Вот код. Пока вставила на страницу 404 ошибки, поскольку на главной не работающая форма не катит, а очень хочется такую, как у вас в коде
где код?
Попробуйте вот так. Вот код:
ДА, я использовала именно этот код, не знаю, почему он не вставился. Не работает.
Ирина, откройте CSS файл вашей темы (Внешний вид -> Редактор -> style.css). Найдите в этом файле вот это:
#searchform input
{
float: left;
color: #000000;
border: 1px solid #000000;
}
Замените его на этот:
#searchform input
{
float: left;
color: rgb(255, 255, 255);
border: 2px solid rgb(100, 117, 134);
padding: 5px 2px 5px 30px;
background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
}
Естественно картинку “1.png” залейте ко всем файлам вашей темы. Должно работать на все 100%. Я проверял на вашем сайте “Интернет-магазин женской одежды”. Если не получится, значит, вы что-то не так делаете.
Не как то не очень
нет так нет.
Здравствуйте. Попробовал вашу форму поиска. Очень понравилась. (взял последний пример). Только возникли некоторые вопросы. Если можете ответьте пожалуйста.
Добавил форму на статистическую страницу, которая отображается главной. Сам код добавлял не в визуальной закладке, а в закладке текст, т.е. там где виден исходный код. Все хорошо. При сохранении и обновлении страницы поиск отображается нормально, а при переходе на вкладку визуально и обратно форма сбивается и остается только несколько строчек (
)
Как убрать ошибку.
И второй вопрос
На кнопке “Да” изменил надпись “искать” и она переносится на строку ниже. Т.е. получается под поисковым полем. Как разместить ее справа от поискового поля.
Здравствуйте, Виктор!
Ответ на второй вопрос:
<html> <head> <style> .searchform { display: inline-block; zoom: 1; *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } </style> </head> <body> <form class="searchform"> <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Искать" /> </form> </body> </html>Результат:
Насчет второго вопроса, я ничего не понял.
Попробуйте еще раз мне объяснить проблему.
Увеличиваю ширину поискового поля до 250px и она съезжает. Получается она просто не помещается, само поле ее вытесняет. Как увеличить блок всего поиска. и как подключить что бы поиск работал.
Да я вставил код прямо на страницу, я правильно сделал? Или надо было в style прописывать.
В “.searchform”, пропишите ширину блока “width: 330px;”. Я проверял на вашем сайте через исходный код, все должно получиться.
Стиль CSS, нужно было прописать в файл style.css, так удобней.
Чтобы работала форма поиска на WordPress, установите в файле “Форма поиска (searchform.php)”.
<form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <input class="searchfield" ENGINE="text" name="s" id="s" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Искать" /> </form>Что именно в style прописывать. и как тогда выводить на странице?
Так кнопочка стала там где надо. Вставил код как вы сказали, а результаты не выдает. Да кстати у меня в редакторе пустой style, а на хостинге открываю нормально, все прописано.
Виктор, почитайте об этом здесь
Забыл написать. Чтобы отображался поиск, нужно было в файле “header.php” поставить вот такой код:
В файле “Форма поиска (searchform.php)” вот этот:
<form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <input class="searchfield" ENGINE="text" name="s" id="s" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Искать" /> </form>Степан, Добрый день помогите пожалуйста с поиском, уже всю голову сломал.
Проблема в следующем использую cms WP есть два файла
1.Форма поиска (searchform.php)
2.Результаты поиска (search.php)
Я беру у вас на сайте форму поиска “Резиновая форма поиска” её html и вставляю допустим в файл Заголовок (header.php)все ок она отображается НО ПОИСК ПО САЙТУ НЕ ПРОИСХОДИТ???
Что и КУДА нужно еще вставить??
Нужно ли создавать страницу search ????
Как это реализовать? Спасибо)!
Здравствуйте, Егор! У Вас присутствует в шаблоне файл “Результаты поиска (search.php)”?
Да присутствует, вот писал
2.Результаты поиска (search.php)
Какой код куда вставлять ?)
В файле header.php
присутствует строка
проблема в том что не происходит поиск по сайту?
Что не так делаю?
Егор, если вы хотели прописать код в комментариях, это нужно было сделать так:
[ code ] ваш код [ /code ]
Попробуйте в header.php поставить этот код:
В форма поиска (searchform.php) установите этот код:
Все должно работать. Может у вас проблема с файлом “Результаты поиска (search.php)”?
Есть еще один способ как проверить форму поиска. Оставьте CSS стиль так как есть, а форму установите стандартную через виджет. Форма должна получиться резиновой. Жду результатов! Пишите!
Так что имеем, в header у меня стоит тот код который вы дали, в searchform у меня тоже стоит код поиска (поиск отображается), а вот в файле search он просто ПУСТОЙ, что там должно стоять ??? какой код?
<?php get_header(); ?> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span>(<?php the_date_xml(); ?>)</span></h1> <?php the_post_thumbnail(); ?> <?php the_excerpt(); ?> <?php endwhile; ?> <?php posts_nav_link(); ?> <?php else : ?> <h1>По вашему запросу ничео не найденно</h1> <img src="<?php bloginfo('template_url') ?>/imeges/404.jpg" alt="400" width="400" height="314" /> <?php endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>Может некорректно отображаться из-за неуказанных тегов
Доброго времени суток. Очень понравилась твоя тема с формами поиска, я одну использовал. Скажи пожалуйста, что нужно сделать, чтобы она была привязана к сайту и выдавала информацию с него. Создаю сайты на платформе Parallels WPB.
Здравствуйте, Евгений! Мне жаль, но помочь Вам не смогу, так как с платформой Parallels WPB я не знаком. Если бы на WordPress…
Добрый день Степан, я наверное уже достал вопросами но нечего не получается!?
Делаю все как вы написали но поиск не происходит по сайту, я вам доверяю и могу дать доступ в WP, если вам не трудно посмотреть в чем же дело.
Спасибо.
Здравствуйте, Егор! Сбросьте данные через форму “Контакты”.
Здравствуйте, подскажите пожалуйста,как сделать так чтоб заходя на сайт пользователи видели только лупу, а при нажатии на нее выдвигалась строка поиска, то есть надо скрыть или что сделать со строкой поиска, чтоб ее не видно было пока не нажмешь на лупу и строка поиска не выдвинется??=)
Как на сайте [ссылка удалена], только чтоб строка поиска выдвигалась слева от лупы.
Здравствуйте! На том сайте, что вы дали в пример, используется jQuery. Я в jQuery еще пока что не силен!
Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
Вставляю в “searchform.php” этот код:
<form class="searchform"> <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Найти" /> </form>в “Header” имеется:
файл “search.php” тоже есть, но я не знаю, что там нужно менять!
В CSS вставлен:
.searchform { display: inline-block; zoom: 1; *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } "Нужно указать где находиться обработчик поиска:
<form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Найти" /> </form>Скажите пожалуйста. а как вставить компактно Поиск в меню WordPress, подобно тому как это сделано в темах
Avada
Vantage
Twenty Fourteen
Или в плагине UberMenu.
В теме Avada мне больше всего нравится.
Понятно что там картинка при клике на которую ниже появляется форма поиска.
У вас в теме выезжающая и следовательно она будет перекрывать пункты меню.
Я не понял вопроса! У Вас тема “Avada” и Вы хотите вместо стандартного поиска сделать так, как у меня в примере?
Нет у меня тема не Avada а Fruitful.
_[адрес удален]
Так как хочу сделать предельно простой в навигации блок, то решил отказаться от сайдбаров, а поиск установить правее меню. Но для обычной формы Поиска там места не хватает. Поэтому решил разместить правее корзины миниатюру лупы при клике на которую должна появляться форма Поиска.
Сама корзина не в меню, а просто прижата флоатом.
Рядом с ней также прижато флоатом меню.
Я так понимаю что при клике на миниатюру Поиска через скрипт должен появляться или исчезать div c формой поиска.
Саму форму загнать в Header легко, а вот найти подходящий скрипт не получается.
Второй день роюсь в Интернете.
Как пример рассматриваю сейчас
вот такой метод
_https://tradebenefit.ru/plavnoe-otkrytie-i-skrytie-bloka-div-sredstvami-jquery
По замыслу вместо текстовой ссылки должна быть кликабельная картинка лупы, а во всплывающем диве форма поиска. Также как в теме Avada.
Но что-то пока не получается. Ссылка появляется, но реакции на клик нет
Владимир, попробуйте это сделать следующим образом:
этот код:В Вашей теме откройте файл “header.php” и вставьте между
<!-- Подключаем jQuery --> <script ENGINE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- Скрипт плавного открытия и закрытия блока --> <script type='text/javascript'> $(document).ready(function() { $("A#trigger").toggle(function() { // Отображаем скрытый блок $("DIV#box").fadeIn(); // fadeIn - плавное появление return false; // не производить переход по ссылке }, function() { // Скрываем блок $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение return false; // не производить переход по ссылке }); // end of toggle() }); // end of ready() </script>Теперь, откройте файл, где размещено меню (это может быть в файле header.php) и
Большое спасибо за помощь. В общем то работает. Только Revolution Slider, который присутствует на моём сайте, убивает напрочь.
Здравствуйте!У меня агенство по аренде домов.Очень нужен поисковик ,но не простой ,расширенный.Может подскажете как его сделать.Я мало что понимаю в программировании.
Здравствуйте, Светлана! Я так понял, Вам нужен не поисковик а поиск для сайта? Если да, тогда есть отличное решение для организации поиска – “Яндекс.Поиск” .
Ссылка на сайт: https://site.yandex.ru/
Здравствуйте! А есть код для поиска картинок по сайту?
Здравствуйте! К сожалению нет!
Здравствуйте, Степан!
Что-то у меня никак не получается установить поиск на сайте. Можно как-то с вами связаться по скайпу?
Здравствуйте, Станислав. Расскажите вначале, что не получается. Форма поиска отображается, просто ничего не ищет на сайт?
Здравствуйте Степан!Форма поиска отображается, просто ничего не ищет на сайте.Подскажите лузеру что не так,что добавить.
<html> <head> <style> .searchform { display: inline-block; zoom: 1; *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } </style> </head> <body> <form class="searchform"> <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Да" /> </form> </body> </html>Здравствуйте, Вячеслав!
Это всего лишь каркас формы поиска. Нужен еще обработчик, который будет вытягивать из базы данных все статьи, где есть слово в забиваемом поиске.
Если сайт не работает на БД, тогда есть готовое решение здесь.
У Вас сайт написан на движке? Если да, то на каком?
Здравствуйте Степан помогите с проблемой кода,почему то не один код на моём сайте не работает, а если воспользоваться кодами гугла или яндекс то они производят поиск сначала по инету а потом по сайту, а мне нужно чтобы поиск работал только по сайту
уже сил нет
Здравствуйте, Марина! Это всего лишь формы поиска, то есть каркас (оболочка). Теперь нужно создать обработчик (механизм), который будет искать статьи.
Для этого понадобиться знания php.
Насчет поиска от яндекс, почитайте тут.
Степан, здравствуйте!
Подскажите, пожалуйста, как подключить обработчика, если нет никакого движка на сайте?
Здравствуйте, Александр!
Степан, спасибо Вам за ответ.
У меня это уже добавлено
_________
__________
и сама строка отобразилась.
Но Вы не могли бы, пожалуйста, подсказать, как сделать в html, чтобы поиск работал? Нужно что-то вписать в “action=”здесь будет адрес обработчика”, веб-сайт обработчика? Я просто совсем чайник в этом и не все понимаю)
Если да, то не могли бы посоветовать обработчика?
Очень благодарен за Вашу помощь.
обработчик пишется на языке программирования и адрес на этот код вставляется здесь “action=”здесь будет адрес обработчика”.
Вам бы я порекомендовал использовать вот это:
Прочитайте