» »

Светлый поиск по сайту с кнопкой на uCoz

Светлый поиск по сайту с кнопкой на uCoz

Сложно представить сайт без поиска по нему материала и здесь простой скрипт рабочий и плюс к нему идут стили на кнопку по оттенку цвета. Вы можете просто поменять под свою стилистику гамму, также есть на нем эффект преобразование другого оттенка про наведение его. По умолчанию идет в нем надпись. Что если у вас тематика особая или редкая, вы можете вписать прямо в форму поиска, только там нужно будет все записи продублировать, и чтоб они одинаковы были.

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

Установка:

Где считаете нужным и там устанавливаем этот код.

Код
<div class="search_bl">
  <?if($SEARCH_FORM$)?>
  <form class="searchForm" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/">
  <input type="text" name="q" value="Поиск по сайту..." onfocus="if (value == 'Поиск по сайту...') {value = ''}" onblur="if (value == '') {value = 'Поиск по сайту...'}">
  <button type="submit" class="aicon-search"></button>
  <input type="hidden" name="t" value="0">
  </form>
  <?endif?>
  </div>


CSS:

Код
/* SEARCH
--------------------------------------------------------------------*/
.search_bl {float: left; padding: 0px 20px; }
.searchForm {border: 1px solid #e2e2e2;border-radius: 50px;position: relative;width: 300px;overflow: hidden;background: #fafafa;}
.searchForm input[type="text"]{border: 0; width: 85%;line-height: 38px; height: 38px;padding-left: 15px; color: #a9a9ae; background: transparent; font-size: 14px;}
.searchForm button[type="submit"] {cursor: pointer;width: 38px;height: 38px;position: absolute;right: 0;top: 0;border-radius: 50%;border: 0;background: #0EA7DF url(http://zornet.ru/CSS-ZORNET/Abvan/sch.png) 50% 50% no-repeat;color: #3a3535;font-size: 18px;transition: all 0.3s cubic-bezier(0.25, 0.1, 0.12, 1.04) 0s;}
.searchForm button[type="submit"]:hover {color: #fff;background: #fd8d09;}
.searchForm button[type="submit"]:hover {color: #fff;background: #1b7da0 url(http://zornet.ru/CSS-ZORNET/Abvan/sch.png) 50% 50% no-repeat;}


На этом вся установка.
30.01.2017 Просмотров: 610 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
FeStemBer
FeStemBer 30.01.2017 00:211
0
Всегда поиск рабочий пригодится, этот больше похоже на стандартный, только по стилям доработан.
Kosten
Kosten 30.01.2017 00:272
0
Просто поиск этот нашел, но там эффект другой был, не стал его выставлять, а сделал по стандарту, пришлось ссылку добавить.
Сафрон
Сафрон 30.01.2017 00:303
0
Много скриптов поиска вижу, но вообще кто редко пишет про search где можно пару строк написать, что это поиск по всему сайту. Если у вас блог, или файлы, то можно поставить на один модуль.
Kosten
Kosten 31.01.2017 02:054
0
Но здесь лучше сразу поиск поставить на сайт со всеми модулями, а там у кого блог, тот может поиск на его один перевести.
TiMzLeR
TiMzLeR 07.02.2017 02:145
0
У меня не большая проблемка:Клик и скрин :) почему-та он у меня совсем по другому отображается...
Kosten
Kosten 07.02.2017 02:456
0
Это стили не подключены, к примеру на тестовом сайте, почему то у меня не подключаются с CSS, что приходится ставить рядом с кодом, если поиск стоит вверх сайта, то установите рядом стили с кодом.

Код
<style>  

Здесь ставим стили, что идут с материалом.

</style>
Kosten
Kosten 07.02.2017 02:477
0
Но с начало попробуйте вывести через CSS если также будет, то так как показано и все появиться.
avatar