ripanime

Скрипт Добавь в закладки с эффектом свечения

Bitfood — Mon, 14 Oct 2013 06:46:50 GMT

Скрипт Добавь в закладки с эффектом свечения при наведении курсором на изображение
Установка:
Вставляем в блок:

Код

Нажми на клавиатуре Ctrl+D или нажми Добавить

Вставляем в CSS:

Код

#banners img{opacity:.3;filter:alpha(opacity=30)}
  .op_fon {background:#f7f7f7;border:1px solid #DBDBDB;border-right:1px dotted #ccc;width:40px;height:40px;}
  .gost {background:#fff;border:1px solid #DBDBDB;padding:5px;border-left:none;text-align:left;margin-left:-3px;padding-bottom:2px;margin-top:-5px;height:40px;font:10px Tahoma;width:150px;}
  .op_fon img {padding-left:5px; filter:progid:DXImageTransform.Microsoft.alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
  .eMessagecsomsk a img, .eMessagecsomsk img {padding:3px !important;background:#ffffff;
  border:1px solid#dbdbdb !important;border-radius:4px;
  -moz-border-radius:7px;box-shadow:0px 0px 10px #e8e8e8;-moz-box-shadow:0px 0px 10px #e8e8e8;}
  a img {border:0px;}

Часы для сайта или для блога

DoG — Sun, 18 Aug 2013 09:53:57 GMT

Новые часы которые плавно меняют цвет каждую секунду, что-то похоже на хамелеона...
Как установить часы на ucoz платформу? Очень просто и легко. Ставите код часов в любое место сайта или в созданный глобальный блок.

Код

Функция Кто Онлайн для uCoz v2

DoG — Sun, 18 Aug 2013 08:31:00 GMT

Всем доброго дня, сегодня мы будем улучшать внешний вид функции сайта на uCoz под названием количество пользователей онлайн, благодаря стандартному html-css коду

И так для начала идём в Админ панель => Настройки => Общие настройки => Активировать функцию "Кто Онлайн" ставим галочку.

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

Код

$ONLINE_COUNTER$

  $COUNTER$

Ну и под конец нашего решения, давайте установим css стили:

Код

/* Функция Кто Онлайн для uCoz в стиле минимализм
------------------------------------------*/
.statistics-user {
  float:left;
  width:230px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
}

.statistics-user-l {
  float:left;
  width:90px;
}

.statistics-user-l b,
.statistics-user-l div{
  float:left;
  width:90px;
}

.statistics-user-l b {
  padding-bottom: 3px;
  border-bottom: 1px solid #CAD3DA;
  font-size:14px;
  color:#666;
}

.statistics-user-l div{
  color:#999;
  height:37px;
  padding: 3px 0px 0px 37px;
  display:block;
  background: url(http://pnghosts.ru/img/statistics-user.png) no-repeat;
}

#onl1 {background-position:0px 0px;}
#onl2 {background-position:0px -35px;}
#onl3 {background-position:0px -69px;}
#onl3 b {border-bottom:none }

.statistics-user-r{
  float:right;
  width:88px;
  padding: 5px 0px 0px 7px;
  border-left: 1px solid #CAD3DA;
}

.statistics-user-r img{
  margin-bottom: 5px;
}

.statistics-user a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

На этом всё, мы закончили установку нашего улучшения внешний вид функции количество пользователей онлайн для сайтов созданных в системе uCoz.

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

Счетчик материалов для uCoz

DoG — Sun, 18 Aug 2013 06:59:05 GMT

И так для начала мы создадим информер материалов для uCoz, для этого идём в Админ панель => Инструменты => Информеры => Создать информер => Счетчик материалов

удаляем старый html код и устанавливаем новый:

Код

Сайтов в каталоге:
$DIR$

Записей в блоге:
$BLOG$

Гостевая книга:
$GB$

Новостей сайта:
$NEWS$

Тем на форуме:
$FORUM_T$

Комментариев:
$COMMENTS$

Объявлений:
$BOARD$

Фотографий:
$PHOTO$

Ответов:
$FAQ$

Файлов:
$LOAD$

Статей:
$PUBL$

Тестов:
$TESTS$

Видео:
$VIDEO$

Игр:
$STUFF$

а если вы хотите чтобы ячейка с количеством материалов имел тёмный фон, как в примере номер два, то устанавливаем в тот же информер следующий html код:

Код

Сайтов в каталоге:
$DIR$

Записей в блоге:
$BLOG$

Гостевая книга:
$GB$

Новостей сайта:
$NEWS$

Тем на форуме:
$FORUM_T$

Комментариев:
$COMMENTS$

Объявлений:
$BOARD$

Фотографий:
$PHOTO$

Ответов:
$FAQ$

Файлов:
$LOAD$

Статей:
$PUBL$

Тестов:
$TESTS$

Видео:
$VIDEO$

Игр:
$STUFF$

а на страницу сайта в нужное место устанавливаем html каркас ячейки с информером материалов:

Код

Счетчик материалов

$MYINF_1$

а теперь давайте стилизуем данное решение, пропишем ему следующие css стили:

Код

/* Правильный счетчик материалов
  ------------------------------------------*/
.informer-materials {
  float:left;
  width:200px;
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
  overflow: hidden;
  margin-right: 20px;
}

.informer-materials-title {
  float:left;
  width:202px;
  padding: 7px 0px;
  background: #376fb9 ;
  margin: -1px -1px 0px -1px;

  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #093a7b;
  text-align:center;
  font-weight: bold;
  color:#fff;
}

.informer-materials ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.informer-materials li{
  float:left;
  width:170px;
  padding: 5px 0px;
  margin: 0px 15px;
  border-top: 1px dotted #CAD3DA;
}

.informer-materials li div{
  float:left;
  width:150px;
  padding-right: 10px;
  text-align:right;
}

.informer-materials li div{
  float:left;
  width:120px;
  text-align:right;
}

.informer-materials li:nth-child(1){
  border-top: none;
}

.informer-materials li span{
  padding: 2px 7px;
  background: #9EA5A8;
  border-radius:3px;

  font:9px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #777;
  font-weight: bold;
  color:#fff;
}

На этом всё, спасибо за внимание!

Авторизация на сайте и выход из профиля без перезагрузки страницы

DoG — Sat, 17 Aug 2013 18:29:43 GMT

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

Установка:

1) Форма входа:

На всех страницах замените $LOGIN_FORM$ на:

Код

$LOGIN_FORM$

2) Кнопка выхода без перезагрузки страницы прописывается вот так:

Код

Выход

Необычный топ пользователей для uCoz

DoG — Sat, 17 Aug 2013 14:15:21 GMT

Блок не адаптивный и имеет фиксированную ширину, поэтому Вы сами будете указывать значения длины и ширины в пикселях.
Установка

Создайте информер для модуля Пользователи (Панель управления » Инструменты » Информеры). Выберите Способ сортировки по Репутации. Количество материалов – 8, а количество колонок – 1.

Вставьте следующий код в Шаблон информера.

Код

$REPUTATION$

А этот код туда, где хотите видеть блок (это может быть Первый или Второй контейнер).

Код

$MYINF_1$

Вставьте этот код в Таблицу стилей (CSS).

Код

.top_use1s {width:300px;height:180px;background:#1d1d1d;font-family:Tahoma,sans-serif}
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#1d1d1d}
.top_user img {width:90px;margin-left:-7px}
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}
.top_user a:hover {background:rgba(255,255,255,0.1)}
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(0,0,0,0.3);margin-top:66px}

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

DoG — Sun, 11 Aug 2013 10:12:29 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.

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