Форма входа







Главная » Скрипты для uCoz » Навигация



Делаем красивую форму поиска для сайта на uCoz

04.11.2010, 12:56
Делаем красивую форму поиска для сайта на uCoz Добавлено - 04.11.2010, 12:56

Добавил - U-cheniy

Категория - Навигация

Просмотров: 4390

Комментариев - 2

Рейтинг: 0.0/0



Обсудить этот скрипт на форуме





Как сделать такую форму поиска на сайте:

1. Данная форма поиска расчитана для рисованной шапки сайта. Т.е Вам нужно на шапке нарисовать собственно форму, а далее установить этот скрипт. Потом подогнать одно к другому.

2. Как устанавливать код:
а) Скопировать  1 код в CSS
б) Второй код в шапку сайта (ну или куда ещё возможно...)



1)В css

Код1
#poisk {
background:url(images/01.gif) no-repeat;  
width:293px; /* ширина */
height:60px; /* Высота */
padding-top:17px; /* смещаем всё что внутри в низ, чтобы было ровно */
}

#forma {
background:none; /* убираем белый фон */
font-size:18px; /* размер шрифта */
font-family:Verdana; /* Шрифт */
color:#000000; /* цвет шрифта */
margin-left:20px; /* смещаем в право слово search */
border:none; /* убираем обводку */
}

.knp {
background:url(images/1.png) no-repeat;
width:60px;
height:60px;
border:none; /* убираем обводку */
position:absolute; /* для того чтобы можно было сместить вверх */
top:-16px; /* Смещаем вверх кнопку с лупой */
}

.knp:hover {
background:url(images/1.png) 0px -60px no-repeat;
cursor:pointer; /* курсор в виде руки */
}

2)Сам поиск
Код2
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" id="poisk">
 <div style="position:relative;">
 <input type="text" name="query" id="forma" value="Найти..." onfocus="if(this.value=='Найти...')this.value=''" onblur="if(this.value=='')this.value='Найти...'"/>
 <input class="knp" name="sfSbm" type="submit" value="" />
  <input name="a" value="14" type="hidden">
</div>
  </form>

3. К скрипту прилогаю PSD исходник собственно созданного поля, который я использовал при создании одного сайта!
Проверенно в (Opere, Chrome, Firefox, IE8)



Теперь мы имеем симпотичный поиск, который можно изменить под ваш дизайн. Конечно я как сапожник без сапог, поэтому в пример поиска не берём этот сайт, так как тут он не крособраузерен, а сделать нормальный ещё долго руки не дойдут. Кстате здесь показан поиск для модуля "новости".

При копировании материала, прямая активная ссылка на сайт uvda.ucoz.ua обязательна!
Контактное лицо: VDA W

Что-то похожее




Всего комментариев: 1
1 Полярный медведь  
0
Добрый день.)
Я не сильно разбираюсь в юкозе (а в форме поиска - и подавно), поэтому не могу не уточнить :) Что с ней нужно проделать, чтобы поиск был не только по новостям, но и по другим модулям - например, блогу?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
▲ Вверх