Оповещение о новом лс как ВКонтакте


Оповещение о новом лс как ВКонтакте

2652
6 из 10
Проголосовало: 3




Красивое оформление скрипта Оповещение о новом лс как Вконтакте

Что изменено:
- размещение аватара пользователя с левой стороны ячейки
- старая вёрстка таблицами
- css стили вписаны в html код, а не вынесены в отдельный файл

Установка:

1) Установка Js:

Всё что нам следует сделать, так это установить следующий js код, на вашу страницу сайта, в самый низ перед тегом </body>

Code
<script type="text/javascript">  
  var no_ava = 'http://webo4ka.ru/Ucoz5/no_avatar_opovechenii_o_novom_lc_kak_v_vk.jpg';  
  $.getScript('http://webo4ka.ru/Ucoz5/ls_opovechenii_o_novom_lc_kak_v_vk.js');</script>


2) Установка CSS:

Теперь нам следует выбрать один из пяти вариантов оформление данного решения для uCoz:

Белый вариант:



Code
/* Оповещение о новом лс как Вконтакте  
  ------------------------------------------*/  
  .news_ls1 {  
  position:relative;  
  z-index:9999;  
  }  

  .news_ls2 {  
  position:fixed;  
  bottom:5px;  
  right:5px;  
  }  

  .uContent{  
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;  
  width:300px;  
  background:url(http://webo4ka.ru/Ucoz5/fon_uContent_White_o_novom_lc_kak_v_vk.png);  
  padding:5px 10px 5px 10px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  }  

  .uContent_l {  
  float:left;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#555; text-shadow: 1px 1px 1px #fff; font-weight: bold;  
  }  
   
  .uContent_p {float:right;}  
  .uContent_c {  
  float:left;  
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;  
  width:300px;  
  padding: 5px 0px 0px 0px;  
  }  
   
  .uPm-close {  
  width:18px;  
  height:18px;  
  background:url(http://webo4ka.ru/Ucoz5/knopka_closse_White_o_novom_lc_kak_v_vk.png) no-repeat;  
  }  

  .uPm-close:hover {  
  background-position:0px -18px;  
  }  
   
  .uContent_c img {  
  float:right;  
  width:45px;  
  height:45px;  
  border:1px solid #a7a7a7;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;  
  }  

  .uContent_c span {  
  color:#547ec4;  
  }  
  .uContent_c p {  
  padding:0;  
  margin: 5px 0px 0px 0px;  
  }  

  .uContent_c a:link,  
  .uContent_c a:visited {color:#555;}  
  .uContent_c a:hover {color:#4a6ca5;}  
  /* -------------------------------------- */


Чёрный вариант:



Code
/* Оповещение о новом лс как ВКонтакте  
  ------------------------------------------*/  
  .news_ls1 {  
  position:relative;  
  z-index:9999;  
  }  

  .news_ls2 {  
  position:fixed;  
  bottom:5px;  
  right:5px;  
  }  

  .uContent{  
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;  
  width:300px;  
  background:url(http://webo4ka.ru/Ucoz5/fon_uContent_Black_o_novom_lc_kak_v_vk.png);  
  padding:5px 10px 5px 10px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  }  

  .uContent_l {  
  float:left;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#a7a7a7; text-shadow: 1px 1px 1px #252525; font-weight: bold;  
  }  
   
  .uContent_p {float:right;}  
  .uContent_c {  
  float:left;  
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;  
  color:#a7a7a7;  
  width:300px;  
  padding: 5px 0px 0px 0px;  
  }  
   
  .uPm-close {  
  width:18px;  
  height:18px;  
  background:url(http://webo4ka.ru/Ucoz5/knopka_closse_Black_o_novom_lc_kak_v_vk.png) no-repeat;  
  }  

  .uPm-close:hover {  
  background-position:0px -18px;  
  }  
   
  .uContent_c img {  
  float:right;  
  width:45px;  
  height:45px;  
  border:1px solid #838383;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#646464;  
  }  

  .uContent_c span {  
  color:#8fbbe9;  
  }  
  .uContent_c p {  
  padding:0;  
  margin: 5px 0px 0px 0px;  
  }  

  .uContent_c a:link,  
  .uContent_c a:visited {color:#f7f7f7;}  
  .uContent_c a:hover {color:#bdbdbd;}  
  /* -------------------------------------- */


Оранжевый вариант:



Code
/* Оповещение о новом лс как Вконтакте  
  ------------------------------------------*/  
  .news_ls1 {  
  position:relative;  
  z-index:9999;  
  }  

  .news_ls2 {  
  position:fixed;  
  bottom:5px;  
  right:5px;  
  }  

  .uContent{  
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;  
  width:300px;  
  background:url(http://webo4ka.ru/Ucoz5/fon_uContent_Orange_o_novom_lc_kak_v_vk.png);  
  padding:5px 10px 5px 10px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  }  

  .uContent_l {  
  float:left;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#e7ad3c; text-shadow: 1px 1px 1px #fff; font-weight: bold;  
  }  
   
  .uContent_p {float:right;}  
  .uContent_c {  
  float:left;  
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;  
  color:#555;  
  width:300px;  
  padding: 5px 0px 0px 0px;  
  }  
   
  .uPm-close {  
  width:18px;  
  height:18px;  
  background:url(http://webo4ka.ru/Ucoz5/knopka_closse_Orange_o_novom_lc_kak_v_vk.png) no-repeat;  
  }  

  .uPm-close:hover {  
  background-position:0px -18px;  
  }  
   
  .uContent_c img {  
  float:right;  
  width:45px;  
  height:45px;  
  border:1px solid #f6c76a;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;  
  }  

  .uContent_c span {  
  color:#4876c1;  
  }  
  .uContent_c p {  
  padding:0;  
  margin: 5px 0px 0px 0px;  
  }  

  .uContent_c a:link,  
  .uContent_c a:visited {color:#444;}  
  .uContent_c a:hover {color:#999;}  
  /* -------------------------------------- */


Синий вариант:



Code
/* Оповещение о новом лс как Вконтакте  
  ------------------------------------------*/  
  .news_ls1 {  
  position:relative;  
  z-index:9999;  
  }  

  .news_ls2 {  
  position:fixed;  
  bottom:5px;  
  right:5px;  
  }  

  .uContent{  
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;  
  width:300px;  
  background:url(http://webo4ka.ru/Ucoz5/fon_uContent_Blue_o_novom_lc_kak_v_vk.png);  
  padding:5px 10px 5px 10px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  }  

  .uContent_l {  
  float:left;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#6e87c6; text-shadow: 1px 1px 1px #fff; font-weight: bold;  
  }  
   
  .uContent_p {float:right;}  
  .uContent_c {  
  float:left;  
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;  
  color:#555;  
  width:300px;  
  padding: 5px 0px 0px 0px;  
  }  
   
  .uPm-close {  
  width:18px;  
  height:18px;  
  background:url(http://webo4ka.ru/Ucoz5/knopka_closse_Blue_o_novom_lc_kak_v_vk.png) no-repeat;  
  }  

  .uPm-close:hover {  
  background-position:0px -18px;  
  }  
   
  .uContent_c img {  
  float:right;  
  width:45px;  
  height:45px;  
  border:1px solid #99bee4;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;  
  }  

  .uContent_c span {  
  color:#43983f;  
  }  
  .uContent_c p {  
  padding:0;  
  margin: 5px 0px 0px 0px;  
  }  

  .uContent_c a:link,  
  .uContent_c a:visited {color:#555;}  
  .uContent_c a:hover {color:#999;}  
  /* -------------------------------------- */


Зелёный вариант:



Code
/* Оповещение о новом лс как Вконтакте  
  ------------------------------------------*/  
  .news_ls1 {  
  position:relative;  
  z-index:9999;  
  }  

  .news_ls2 {  
  position:fixed;  
  bottom:5px;  
  right:5px;  
  }  

  .uContent{  
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;  
  width:300px;  
  background:url(http://webo4ka.ru/Ucoz5/fon_uContent_Green_o_novom_lc_kak_v_vk.png);  
  padding:5px 10px 5px 10px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);  
  }  

  .uContent_l {  
  float:left;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#1dbb19; text-shadow: 1px 1px 1px #fff; font-weight: bold;  
  }  
   
  .uContent_p {float:right;}  
  .uContent_c {  
  float:left;  
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;  
  color:#555;  
  width:300px;  
  padding: 5px 0px 0px 0px;  
  }  
   
  .uPm-close {  
  width:18px;  
  height:18px;  
  background:url(http://webo4ka.ru/Ucoz5/knopka_closse_Green_o_novom_lc_kak_v_vk.png) no-repeat;  
  }  

  .uPm-close:hover {  
  background-position:0px -18px;  
  }  
   
  .uContent_c img {  
  float:right;  
  width:45px;  
  height:45px;  
  border:1px solid #77ca79;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;  
  }  

  .uContent_c span {  
  color:#5976c0;  
  }  
  .uContent_c p {  
  padding:0;  
  margin: 5px 0px 0px 0px;  
  }  

  .uContent_c a:link,  
  .uContent_c a:visited {color:#555;}  
  .uContent_c a:hover {color:#999;}  
  /* -------------------------------------- */


Примечание:

Для того чатобы аватар пользователя который отправил вам личное сообщение стал отображаться, вам следует включить API в админ панели uCoz, для этого заходим в:

Админ панель => Настройки => Общие настройки => Разрешить использование API

на этом всё...


Источник: http://upost.su
Вольный перевод: http://www.center-dm.ru
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 6

Roman52
0
Roman52 написал: Написано 30 Декабря 2011 в 17:17
Комментарий №6
Не подскажите что делать?

Roman52
0
Roman52 написал: Написано 30 Декабря 2011 в 17:17
Комментарий №5
Крестик не робит

Winston888
0
Winston888 написал: Написано 27 Декабря 2011 в 10:42
Комментарий №4
как сделать что бы это окно появлялось каждый раз после обновления страницы пока не прочесть сообщение ?

Winston888
0
Winston888 написал: Написано 27 Декабря 2011 в 10:34
Комментарий №3
Отлично сделано happy

FLaeR3704
0
FLaeR3704 написал: Написано 27 Декабря 2011 в 08:27
Комментарий №2
все робит спс

Dj
0
Dj написал: Написано 26 Декабря 2011 в 12:16
Комментарий №1
Не работает крестик закрыть сообщение.....

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2112
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
  • MeVeR написал:
  • Вовка, привет. А вот такой интереснейший вопрос, возможно ли изменить количество посетителей онлайн на форуме?
    Моё авторство:)
    Последние темы
    Опрос
    227
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: