Скрипт кнопки мне нравится для uCoz

9181 просмотров Alan_Writer 16.05.2013

Доброе времени суток дорогие читатели моего блога, сегодня мы с вами рассмотрим пример того, как поставить к себе на сайт скрипт кнопки мне нравиться от автора SingMen, в данном решении мы не будем использовать какой либо php или сторонние сайты или ещё хуже, задействовать целый модуль на вашем сайте, всё просто как дважды два.

Для начало нам стоит удалить старый код рейтинга:

Код

<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?>

и за место него установить следующий код нужного модуля вашего сайта.

Для раздела новости (news):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог статей (publ):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/publ/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог файлов (load):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/load/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог сайтов (dir):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/dir/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела блог (blog):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/blog/0-0-1-$ID$-14-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела доска объявлений (board):

Код

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/board/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела Фотоальбом (photo):

Код

<?if($RATING$)?>
  <div id="rating_os">
<a href="javascript://" id="golike" onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

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

Вариант № 1 White (Белый):

Код

/* Mне нравится
  ------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#777; text-shadow: 1px 1px 1px #fff;
  background:#f6f6f6;
  border: 1px solid #d6d6d6;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#999;}

#rating_l {
  float:left;
  background: url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_white.png) no-repeat right;
  padding: 3px 10px 3px 5px;
}

#rating_l:hover {
  background: #fff url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_white.png) no-repeat right;
}

#rating_p {
  float:right;
  padding: 3px 5px 3px 5px;
  background:#e3e3e3;
}

Вариант № 2 Black (Чёрный):

Код

/* Mне нравится
  ------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
  background:#484848;
  border: 1px solid #252525;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#a7a7a7;}

#rating_l {
  float:left;
  background: url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_black.png) no-repeat right;
  padding: 3px 10px 3px 5px;
}

#rating_l:hover {
  background: #5d5d5d url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_black.png) no-repeat right;
}

#rating_p {
  float:right;
  padding: 3px 5px 3px 5px;
  background:#6e6e6e;
}

Вариант № 3 Orange (Оранжевый):

Код

/* Mне нравится
  ------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#fff;
  background:#ffe5cd;
  border: 1px solid #ffa24a;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#ff891a; text-shadow: 1px 1px 1px #fff; }

#rating_l {
  float:left;
  background: url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_orange.png) no-repeat right;
  padding: 3px 10px 3px 5px;
}

#rating_l:hover {
  background: #fff3e8 url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_orange.png) no-repeat right;
}

#rating_p {
  float:right;
  text-shadow: 1px 1px 1px #ff891a;
  padding: 3px 5px 3px 5px;
  background:#ffd0a4;
}

Вариант № 4 Blue (Синий):

Код

/* Mне нравится
  ------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  background:#dfecf4;
  border: 1px solid #97b7ca;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#2C68A6;}

#rating_l {
  float:left;
  background: url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_blue.png) no-repeat right;
  padding: 3px 10px 3px 5px;
}

#rating_l:hover {
  background: #e5f5ff url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_blue.png) no-repeat right;
}

#rating_p {
  float:right;
  color:#235e9b;
  padding: 3px 5px 3px 5px;
  background:#b5d9ee;
}

Вариант № 5 Green (Зелёный):

Код

/* Mне нравится
  ------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  background:#cdf6ce;
  border: 1px solid #48b543;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#247e20;}

#rating_l {
  float:left;
  background: url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_green.png) no-repeat right;
  padding: 3px 10px 3px 5px;
}

#rating_l:hover {
  background: #e1fee2 url(http://www.center-dm.ru/ucoz/vid_nravitsa/v_1/ugol_green.png) no-repeat right;
}

#rating_p {
  float:right;
  color:#247e20;
  padding: 3px 5px 3px 5px;
  background:#8bdc87;
}

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

Теги: скрипт, вид рейтинга, для uCoz, мне нравится, кнопка мне нравится, лайк