Скрипты, шаблоны. Всё для uCoz.

Создаём раздвижную форму поиска для uCoz

DoG — Sun, 11 Aug 2013 10:11:46 GMT

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

Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши.

И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом установим следующие js:

Код

Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

Код

Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

Код

/* Раздвижная форма поиска для uCoz
------------------------------------------*/
.sb-search {
  position: relative;
  margin-top: 10px;
  width: 0%;
  min-width: 32px;
  height: 32px;
  float: right;
  overflow: hidden;

  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
}

.sb-search-input {
  position: absolute;
  top: 0;
  right: 0;

  margin: 0;
  z-index: 10;
  width:300px;
  height: 20px;
  outline: none;
  background: #fff;
  border: 1px solid #CAD3DA;
  padding: 5px 32px 5px 20px;

  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#555;
  border-radius:3px 0px 0px 3px;
}

.sb-search-input::-webkit-input-placeholder {
  color: #efb480;
}

.sb-search-input:-moz-placeholder {
  color: #efb480;
}

.sb-search-input::-moz-placeholder {
  color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
  color: #efb480;
}

.sb-icon-search,
.sb-search-submit {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;

  width: 32px;
  height: 32px;
  display: block;

  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.sb-search-submit {
  background: #fff;
  color: transparent;
  border: none;
  outline: none;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.sb-icon-search {
  border:none;
  z-index: 90;
  background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius:3px 3px 3px 3px;
}

.sb-icon-search:before {
  content: "\e000";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  z-index: 11;
  border-radius:0px 3px 3px 0px;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  z-index: 90;
}

На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

Спасибо за внимание!

Новое меню от Diz-cs

DoG — Sun, 11 Aug 2013 08:44:26 GMT

Установка:
В новый блок вставляем код:

Код

Главная страница

Каталог файлов

Сверстал bogomol

SMS Бесплатно!

DoG — Sun, 11 Aug 2013 07:17:11 GMT

Устанавливаете в любую часть сайта.

Код

Мини-профиль для ucoz

DoG — Fri, 09 Aug 2013 17:46:20 GMT

Описание:
Мини-профиль как у нас на сайте
Установка:
В новый блок вставляем код:

Код

Время: $TIME$
Вы вошли как:
$USERNAME$

Вы вошли как:
$USERNAME$

IP Адрес: $IP_ADDRESS$

Группа: $USER_GROUP$

Личных сообщений: $UNREAD_PM$

Время: $TIME$
Вы вошли как:
$USERNAME$

$LOGIN_FORM$

Вместительная статистика ucoz ver 3.1

DoG — Fri, 09 Aug 2013 13:34:16 GMT

статистика очень простая
Установка:
В блок вставляем:
Если нужно поменять цвет полоски с коричневого на другой, тогда Вам прийдётся изменить цвет вот этого изображения "prg1.png". Сделать это можно в фотошопе или любым графическим редактором, например стандартной утилитой "Paint".

Код

$ONLINE_COUNTER$

$ONLINE_USERS_LIST$Пользователей нету

  [ Полный Список ]

Боковое Меню Цветное и серое

DoG — Thu, 25 Jul 2013 16:00:53 GMT

Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке...
И так Приступим У Самой Установчке:
Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML:

Код

  На главную

  Гостевая

  Форум

Обратная связь

Выход

  Вход

А Вот два типа менюшек выбирайте который вам нужен

Серое Меню

Код

#main{
  position:fixed;
  top: 150px;
  right: 0px;
  padding:0;
}

#main ul{
  padding:0;
}

#navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
}

#navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  right:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
}

#navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_2.png) no-repeat;
  height:35px;
  width:35px;
}

#navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
}

#navigationMenu a:hover{
  text-decoration:none;
}

#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}

#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}

#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}

#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}

#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}

#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}

#navigationMenu .m_gost span,
#navigationMenu .m_forum span,
#navigationMenu .m_pochta span,
#navigationMenu .m_vxod span,
#navigationMenu .m_vixod span,
#navigationMenu .m_home span {
  background:#444;
  color:#777;
  text-shadow:1px 1px 0 #333;
}

Цветное меню

Код

#main{
  position:fixed;
  top: 150px;
  left: 0px;
  padding:0;
  }

  #main ul{
  padding:0;
  }

  #navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
  }

  #navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  left:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  }

  #navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_1.png) no-repeat;
  height:35px;
  width:35px;
  }

  #navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
  }

  #navigationMenu a:hover{
  text-decoration:none;
  }

  #navigationMenu .m_home {background-position:0 0;}
  #navigationMenu .m_home :hover {background-position:0 -35px;}
  #navigationMenu .m_home span{
  background:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
  }

  #navigationMenu .m_gost {background-position:-35px 0;}
  #navigationMenu .m_gost:hover {background-position:-35px -35px;}
  #navigationMenu .m_gost span{
  background:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
  }

  #navigationMenu .m_forum {background-position:-70px 0;}
  #navigationMenu .m_forum:hover {background-position:-70px -35px;}
  #navigationMenu .m_forum span{
  background:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
  }

  #navigationMenu .m_pochta { background-position:-105px 0;}
  #navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
  #navigationMenu .m_pochta span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
  }

  #navigationMenu .m_vxod { background-position:-140px 0;}
  #navigationMenu .m_vxod:hover { background-position:-140px -35px;}
  #navigationMenu .m_vxod span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
  }

  #navigationMenu .m_vixod { background-position:-175px 0;}
  #navigationMenu .m_vixod:hover { background-position:-175px -35px;}
  #navigationMenu .m_vixod span{
  background-color:#27ddbf;
  color:#097863;
  text-shadow:1px 1px 0 #87ffe7;
  }

Скрипт "Наша кнопка"

DoG — Thu, 25 Jul 2013 13:17:20 GMT

Необходимый скрипт практически для любого сайта ucoz
ведь именно Ваши посетители в знак признательности смогут воспользоваться этим скриптом и установить кнопку или же баннер на страницах уже своего сайта, (пояснять важность этого действия я думаю не стоит) или же поможет в обычном баннер обмене
Установка
Все предельно просто код скрипта ucoz следует разместить желательно в отдельном блоке и заполнить исходя из данных своего сайта

Код

Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте. Если вы хотите обменяться с нами баннерами, пишите в гостевую книгу:

Движущиеся блок "друзья сайта"

DoG — Thu, 25 Jul 2013 10:43:29 GMT

Скрипт друзья сайта для uCoz
Просто вставьте это в блок

Код

Название сайта

Темный мини профиль для Ucoz

DoG — Wed, 24 Jul 2013 15:56:58 GMT

Скрипт для Ucoz изменит мини профиль вашего сайта. Подойдет исключительно для темных дизайнов.

Создаем глобальный блок и вставляем код:

Код

$USERNAME$

Ты на сайте: $USER_REG_DAYS$-й день

Личных сообщений: $UNREAD_PM$

Твой Ip: $IP_ADDRESS$

$LOGIN_FORM$

Последние комментарии как на diz-cs

DoG — Wed, 24 Jul 2013 10:19:18 GMT

Красивый информер последние комментарии для вашего сайта. Этот информер подойдёт для темных дизайнов. В нем преобладают зеленые цвета на которых написано время комментария. Слева находится Аватар того пользователя который оставил комментарий.

2. Заходим в панель управления.

Создаем информер с параметрами:

[Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1]

В шаблон информера вставляем следующий код:

Код

в $TIME$ $DATE$

$MESSAGE$

» $ENTRY_TITLE$