BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Формы поиска для сайтов

Формы поиска для сайтов

2012-11-09 / Вр:21:48 / просмотров: 38129

Здравствуйте дорогие читатели моего блога. Сегодня у меня было вдохновение написать хороший пост, но я не знал о чем именно писать. Хочется писать посты о том, что вас сильно бы интересовало. Отсылайте мне письма через форму обратной связи, предлагайте темы, которые вы хотели бы видеть на моем блоге. Буду рад с вами держать связь через e-mail. Спасибо.
Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Вы должны понимать, что любая форма без обработчика работать не будет, другими словами сказать, не будет выдавать задаваемый результат. Наверное я вас запутал?! Я не специально, так просто получилось.

Простой поиск для сайта.

Это простая форма поиска, без всяческих наворотов. Само название "простой поиск для сайтов" говорит само за себя.

Простой поиск для сайта

Вставьте этот код на сайте между тег <body> форма поиска </body>

<form method="get" action="">
<input class="search-text" type="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>

Вот и все формы поиска, что я хотел выложить на блоге. Если что-то будет интересное, я обязательно выложу... я не жлоб, хотя...... не, точно не жлоб. Удачи!!!
Есть вопросы, предложения, идеи?!! Пишите в комментариях.

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

87 Ответов на комментарий - Формы поиска для сайтов

  1. Вера

    Здравствуйте, Степан! С удовольствие почитала статью и подписалась на ваш блог. Я как раз разбиралась с формами на html5 и тут так вовремя набрела на вашу статью. Спасибо Вам. У вас очень красивый дизайн. Успехов вам и благополучия, вам и вашей семье.

    Ответить

    Степан => автор блога

    ☼Степан ☼ автор блога отвечает:

    Спасибо!!! Приятно. Рад, что моя статья вам пригодилась. :)

    Ответить

  2. Сашуля

    Красивые формы поиска, а как сделать обработчик формы для WordPress? :| Спасибо :smile:

    Ответить

  3. Сергей

    А откуда резиновая форма поиска берет картинку? Я имею ввиду, если не менять CSS свойства? На моем сайте такой картинки нет и на ваш вроде не ведет…

    Ответить

    Степан => автор блога

    ☼ Степан ☼ автор блога отвечает:

    Если я вас правильно понял, вы не можете установить на сайт резиновую форму поиска?
    Вы можете скачать готовы исходный код с картинкой. Для этого нажмите скачать.
    Вот картинка с примера http://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.
    Если что-то не получается или я вас не так понял, пишите, помогу.

    Ответить

  4. Сергей

    Нет, в коде я разобрался и форму поставил, мне интересно, если взять код из статьи, тогда картинка подгружаться будет с вашего сайта?

    Ответить

    Степан => автор блога

    ☼ Степан ☼ автор блога отвечает:

    Если использовать код так, как в примере в статье, картинка будет грузиться с вашего сайта. Картинку нужно загрузить в корень сайта. Если захотите картинку загрузить в любую папку сайта, тогда везде, где в CSS прописана картинка search.png укажите путь к папке. Вот так (название папки/search.png).

    Ответить

  5. Сергей

    Не, это я туплю))))Все понял что надо картинку все таки закачать))))) Вчера ночью смотрел код, спать хотел и тупил)))))

    Ответить

    Степан => автор блога

    ☼ Степан ☼ автор блога отвечает:

    Правильно Сергей вы поняли. :arrow:

    Ответить

  6. ирина

    Добрый день,
    Я установила на сайт вашу форму поиска, но она не работает. Т.е. форма поиска видна на сайте, но найти что-либо через неё не возможно. Как это исправить?

    Ответить

    Степан => автор блога

    ☼ Степан ☼ автор блога отвечает:

    Здравствуйте Ирина. Это всего лишь форма для поиска и не более. К этим формам поиска следует подключить скрипт который будет обрабатывать поиск. Если вы используете движок CMS, тогда с “поиском” проблем не должно быть. Какой движок используете вы? Если WordPress, тогда запросто расскажу, как подключить форму поиска.
    Пишите, хочу Вам помочь.

    Ответить

    ирина отвечает:

    Степан, да я использую wordpress

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Ирина, посмотрите, есть ли на вашем шаблоне такие файлы:
    Результаты поиска (search.php), Форма поиска (searchform.php)?

    Ответить

    ирина отвечает:

    Есть оба эти файла.

    Степан => автор блога

    Степан => автор блога отвечает:

    Форму поиска скопируйте в файл (searchform.php). Скопируйте полностью этот код и вставьте его в файл searchform.php.

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <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>

    Все остальное в этом файле должно быть удаленно. Но советую сделать резервную копию в начале.
    Напишите результат.

  7. ирина

    Полностью заменила на код, котрый вы сказали, но что-то не работает

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Установите этот код в файле “header.php”.

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    Это код вывода формы поиска.

    Ответить

  8. ирина

    Поставила, но пока никаких изменений.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Давайте я с вами спешусь через почту? Постараюсь разобраться в чем проблема.

    Ответить

    ирина отвечает:

    да, давайте спишемся в почте. Я буду вам очень признательна за помощь.

    Ответить

  9. Степан => автор блога Степан => автор блога

    Кстати, форму поиска вы можете поставить и через виджет “ПОИСК – Форма поиска для вашего сайта”.

    Ответить

  10. Анастасия

    Здравствуйте. Подскажите, почему в варианте формы поиска с лупой, эта самая лупа не отображается? Как это можно исправить?
    А еще подскажите, можно ли у вас на блоге почитать, о том, как сделать форму комментирования записей со смайликами и добавить фон (в вашем случае линовка),

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте. Чтобы отображалась лупа в поиске, нужно прописать правильно путь к картинке с лупой.
    Если я вас правильно понял,то по поводу комментариев со смайликами вы можете почитать тут

    Ответить

    Анастасия отвечает:

    Да, именно это! Спасибо!

    Ответить

  11. Анастасия

    Здравствуйте еще раз. И еще возник вопрос. Все установилась, картинка, как мне нравится, но поиска по сайту не происходит. Что не так?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте Анастасия. Спасибо вам за комментарии.
    Чтобы производился писк по сайту, нужен еще дополнительно скрипт. Вы используете движок WordPress или создаете сайты ручным способом (HTML)? Если вы используете WordPress, могу помочь.

    Ответить

    Анастасия отвечает:

    Спасибо за быстрый ответ.
    Я использую WordPress.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    в файле “searchform.php” найдите строку с <form> и замените на такой код

    <form class="search-mein" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    Если плохо объяснил, скажите, какой вы поиск выбрали из статьи.

    Ответить

    Анастасия отвечает:

    Степан, дело в том, что у меня нет в теме этого файла вообще. И я не вижу никакого кода.

    Степан => автор блога

    Степан => автор блога отвечает:

    В том файле в котором вы поставили код формы поиска нужно прописать “action”.
    Например, у меня в статье вы видите вот такой код:

    <form method="get" action="">
    ***********
    </form>

    ЗАМЕНИТЕ первую строку на вот такую:

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    Анастасия отвечает:

    К сожалению, описанные вами ниже действия не помогли. :sad:

    Степан => автор блога

    Степан => автор блога отвечает:

    Если вы мне доверяете, можете дать доступ в админ-панель. Я попробую исправить. Если согласны, тогда я вам отпишу на почту.

    Анастасия отвечает:

    Боюсь, у меня нет выбора :roll:

    Степан => автор блога

    Степан => автор блога отвечает:

    :smile:

  12. Ирина

    Гигантская проблема с поиском.. Установила на 404.php. Но поиск осуществляется конкретно на этой несуществующей странице с результатом: Нет результатов для поиска. Как мне быть? В хедэре уже есть форма, она работает и на 404, и на сайте, но в 404.php ваша форма не идет(

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    Ирина отвечает:

    Использую простую, но красивую форму поиска. Вордпресс. Почитала все комменты к посту, все попробовала, но результаты поиска не обрабатываются. Меня редиректит на главную без результатов(

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Ира, меня интересовал более подробный ответ – Вы использовали форму из моего сайта? Если да, то какую по счету. А лучше скиньте в комментарий код формы поиска, так, как вы используете ее. Посмотрю, насколько правильно вы ее используете.

    Ответить

    Ирина отвечает:

    Писала название, как у вас на сайте написано. Вот код. Пока вставила на страницу 404 ошибки, поскольку на главной не работающая форма не катит, а очень хочется такую, как у вас в коде

    Степан => автор блога

    Степан => автор блога отвечает:

    где код?

    Степан => автор блога

    Степан => автор блога отвечает:

    Попробуйте вот так. Вот код:

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <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>
    

    Ирина отвечает:

    ДА, я использовала именно этот код, не знаю, почему он не вставился. Не работает.

    Степан => автор блога

    Степан => автор блога отвечает:

    Ирина, откройте 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%. Я проверял на вашем сайте “Интернет-магазин женской одежды”. Если не получится, значит, вы что-то не так делаете.

  13. Алексей

    Не как то не очень

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    нет так нет.

    Ответить

  14. Виктор

    Здравствуйте. Попробовал вашу форму поиска. Очень понравилась. (взял последний пример). Только возникли некоторые вопросы. Если можете ответьте пожалуйста.
    Добавил форму на статистическую страницу, которая отображается главной. Сам код добавлял не в визуальной закладке, а в закладке текст, т.е. там где виден исходный код. Все хорошо. При сохранении и обновлении страницы поиск отображается нормально, а при переходе на вкладку визуально и обратно форма сбивается и остается только несколько строчек ( 

    )
    Как убрать ошибку.
    И второй вопрос
    На кнопке “Да” изменил надпись “искать” и она переносится на строку ниже. Т.е. получается под поисковым полем. Как разместить ее справа от поискового поля.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Виктор!
    Ответ на второй вопрос:

    <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" type="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" type="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>
    

    Ответить

  15. Виктор

    Что именно в style прописывать. и как тогда выводить на странице?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Виктор, почитайте об этом здесь

    Ответить

  16. Виктор

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Забыл написать. Чтобы отображался поиск, нужно было в файле “header.php” поставить вот такой код:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    В файле “Форма поиска (searchform.php)” вот этот:

    <form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input class="searchfield" type="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>
    

    Ответить

  17. Егор

    Степан, Добрый день помогите пожалуйста с поиском, уже всю голову сломал.
    Проблема в следующем использую cms WP есть два файла
    1.Форма поиска (searchform.php)
    2.Результаты поиска (search.php)
    Я беру у вас на сайте форму поиска “Резиновая форма поиска” её html и вставляю допустим в файл Заголовок (header.php)все ок она отображается НО ПОИСК ПО САЙТУ НЕ ПРОИСХОДИТ???
    Что и КУДА нужно еще вставить??
    Нужно ли создавать страницу search ????
    Как это реализовать? Спасибо)! :o

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Егор! У Вас присутствует в шаблоне файл “Результаты поиска (search.php)”?

    Ответить

    Егор отвечает:

    Да присутствует, вот писал
    2.Результаты поиска (search.php)
    Какой код куда вставлять ?)

    Ответить

    Егор отвечает:

    В файле header.php
    присутствует строка

    проблема в том что не происходит поиск по сайту?
    Что не так делаю?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Егор, если вы хотели прописать код в комментариях, это нужно было сделать так:
    [ code ] ваш код [ /code ]
    Попробуйте в header.php поставить этот код:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    В форма поиска (searchform.php) установите этот код:

    <form class="form-search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="text" name="s" id="s" placeholder="поиск" value=""/>
    </form>
    

    Все должно работать. Может у вас проблема с файлом “Результаты поиска (search.php)”?
    Есть еще один способ как проверить форму поиска. Оставьте CSS стиль так как есть, а форму установите стандартную через виджет. Форма должна получиться резиновой. Жду результатов! Пишите!

  18. Егор

    Так что имеем, в 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(); ?>	
    

    Может некорректно отображаться из-за неуказанных тегов

    Ответить

    Егор отвечает:

    Добрый день Степан, я наверное уже достал вопросами но нечего не получается!?
    Делаю все как вы написали но поиск не происходит по сайту, я вам доверяю и могу дать доступ в WP, если вам не трудно посмотреть в чем же дело.
    Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Егор! Сбросьте данные через форму “Контакты”.

    Ответить

  19. Евгений

    Доброго времени суток. Очень понравилась твоя тема с формами поиска, я одну использовал. Скажи пожалуйста, что нужно сделать, чтобы она была привязана к сайту и выдавала информацию с него. Создаю сайты на платформе Parallels WPB.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Евгений! Мне жаль, но помочь Вам не смогу, так как с платформой Parallels WPB я не знаком. Если бы на WordPress…

    Ответить

  20. Jones

    Здравствуйте, подскажите пожалуйста,как сделать так чтоб заходя на сайт пользователи видели только лупу, а при нажатии на нее выдвигалась строка поиска, то есть надо скрыть или что сделать со строкой поиска, чтоб ее не видно было пока не нажмешь на лупу и строка поиска не выдвинется??=)
    Как на сайте [ссылка удалена], только чтоб строка поиска выдвигалась слева от лупы.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! На том сайте, что вы дали в пример, используется jQuery. Я в jQuery еще пока что не силен!

    Ответить

  21. Иван

    Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
    Вставляю в “searchform.php” этот код:

    <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>
    

    в “Header” имеется:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    файл “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" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
     <input class="searchbutton" type="button" value="Найти" />
    </form>
    

    Ответить

  22. Владимир

    Скажите пожалуйста. а как вставить компактно Поиск в меню WordPress, подобно тому как это сделано в темах
    Avada
    Vantage
    Twenty Fourteen
    Или в плагине UberMenu.
    В теме Avada мне больше всего нравится.
    Понятно что там картинка при клике на которую ниже появляется форма поиска.
    У вас в теме выезжающая и следовательно она будет перекрывать пункты меню.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Я не понял вопроса! У Вас тема “Avada” и Вы хотите вместо стандартного поиска сделать так, как у меня в примере?

    Ответить

  23. Владимир

    Нет у меня тема не Avada а Fruitful.
    _[адрес удален]
    Так как хочу сделать предельно простой в навигации блок, то решил отказаться от сайдбаров, а поиск установить правее меню. Но для обычной формы Поиска там места не хватает. Поэтому решил разместить правее корзины миниатюру лупы при клике на которую должна появляться форма Поиска.
    Сама корзина не в меню, а просто прижата флоатом.
    Рядом с ней также прижато флоатом меню.
    Я так понимаю что при клике на миниатюру Поиска через скрипт должен появляться или исчезать div c формой поиска.
    Саму форму загнать в Header легко, а вот найти подходящий скрипт не получается.
    Второй день роюсь в Интернете.
    Как пример рассматриваю сейчас
    вот такой метод
    _http://tradebenefit.ru/plavnoe-otkrytie-i-skrytie-bloka-div-sredstvami-jquery
    По замыслу вместо текстовой ссылки должна быть кликабельная картинка лупы, а во всплывающем диве форма поиска. Также как в теме Avada.
    Но что-то пока не получается. Ссылка появляется, но реакции на клик нет

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Владимир, попробуйте это сделать следующим образом:
    В Вашей теме откройте файл “header.php” и вставьте между этот код:

    <!-- Подключаем jQuery -->
      <script type="text/javascript" src="http://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) и

    <a href='#' id='trigger'>Поиск</a> 
      <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>
    <?php include(TEMPLATEPATH . '/searchform.php'); ?>
    </div>
    

    Ответить

  24. Владимир

    Большое спасибо за помощь. В общем то работает. Только Revolution Slider, который присутствует на моём сайте, убивает напрочь.

    Ответить

  25. Светлана

    Здравствуйте!У меня агенство по аренде домов.Очень нужен поисковик ,но не простой ,расширенный.Может подскажете как его сделать.Я мало что понимаю в программировании.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Светлана! Я так понял, Вам нужен не поисковик а поиск для сайта? Если да, тогда есть отличное решение для организации поиска – “Яндекс.Поиск” .
    Ссылка на сайт: https://site.yandex.ru/

    Ответить

  26. Иван

    Здравствуйте! А есть код для поиска картинок по сайту?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! К сожалению нет!

    Ответить

  27. Станислав

    Здравствуйте, Степан!
    Что-то у меня никак не получается установить поиск на сайте. Можно как-то с вами связаться по скайпу?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Станислав. Расскажите вначале, что не получается. Форма поиска отображается, просто ничего не ищет на сайт?

    Ответить

  28. Вячеслав

    Здравствуйте Степан!Форма поиска отображается, просто ничего не ищет на сайте.Подскажите лузеру что не так,что добавить.

    <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>

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Вячеслав!
    Это всего лишь каркас формы поиска. Нужен еще обработчик, который будет вытягивать из базы данных все статьи, где есть слово в забиваемом поиске.
    Если сайт не работает на БД, тогда есть готовое решение здесь.
    У Вас сайт написан на движке? Если да, то на каком?

    Ответить

  29. Марина

    Здравствуйте Степан помогите с проблемой кода,почему то не один код на моём сайте не работает, а если воспользоваться кодами гугла или яндекс то они производят поиск сначала по инету а потом по сайту, а мне нужно чтобы поиск работал только по сайту :???: уже сил нет

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Марина! Это всего лишь формы поиска, то есть каркас (оболочка). Теперь нужно создать обработчик (механизм), который будет искать статьи.
    Для этого понадобиться знания php.
    Насчет поиска от яндекс, почитайте тут.

    Ответить

  30. Александр

    Степан, здравствуйте!

    Подскажите, пожалуйста, как подключить обработчика, если нет никакого движка на сайте?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр!

    <form method="get" action="здесь будет адрес обработчика">
    ...
    </form>
    

    Ответить

    Александр отвечает:

    Степан, спасибо Вам за ответ.
    У меня это уже добавлено :)
    _________

    __________

    и сама строка отобразилась.
    Но Вы не могли бы, пожалуйста, подсказать, как сделать в html, чтобы поиск работал? Нужно что-то вписать в “action=”здесь будет адрес обработчика”, веб-сайт обработчика? Я просто совсем чайник в этом и не все понимаю)

    Если да, то не могли бы посоветовать обработчика?

    Очень благодарен за Вашу помощь.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    обработчик пишется на языке программирования и адрес на этот код вставляется здесь “action=”здесь будет адрес обработчика”.
    Вам бы я порекомендовал использовать вот это:
    Прочитайте

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663