Этот скрипт создаёт на сайте систему рейтинга, где пользователи могут ставить лайки или дизлайки (оценки «нравится» или «не нравится»).

Вот как это работает простыми словами:Вид на странице: На сайте отображается три элемента:Кнопка «Не нравится» (для отрицательной оценки).

Число, показывающее текущий рейтинг (например, +5 или -3).
Кнопка «Нравится» (для положительной оценки).

Что происходит при клике:Когда пользователь нажимает «Нравится» или «Не нравится», запускается функция rateForm.

Эта функция отправляет запрос на сервер с информацией о том, какую оценку поставили (+1 за «нравится», -1 за «не нравится»), и указывает ID объекта (например, поста или комментария).

Пока запрос обрабатывается, кнопки «нравится» и «не нравится» временно скрываются, чтобы избежать повторных кликов.

Обработка на сервере:Сервер получает запрос, обновляет рейтинг и возвращает новое значение.
Если всё прошло успешно, рейтинг обновляется на странице, и число подсвечивается: зелёным (если рейтинг положительный), красным (если отрицательный) или серым (если ноль).
Появляется сообщение: «Оценка засчитана!».

Если что-то пошло не так:Если сервер вернёт ошибку, скрипт попробует её обработать, но рейтинг не изменится.

Технические детали:Рейтинг рассчитывается как сумма всех оценок минус двойное количество голосов (чтобы учесть начальное значение).

Скрипт использует jQuery для работы с элементами страницы и отправки запросов.
Стили (positiveRate, negativeRate, nullRate) задают внешний вид числа рейтинга в зависимости от его значения.

В общем, это удобная система для голосования, которая позволяет пользователям оценивать контент и сразу видеть результат.

Каталог файлов в нудное место
Код
<div class="rate_my_post">
  <a class="orating_m" title="Не нравится" href="#" onclick="rateForm(-1,$ID$);return false"></a>
  <a class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>" href="javascript://" title="Общий рейтинг"><b id="rate_$ID$"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b> </a>
  <a class="orating_p" title="Нравится" href="#" onclick="rateForm(1,$ID$);return false"></a>
  </div>


Js код
Код
<script>rateForm = function(c, d, f, g) {
  if (typeof d == 'undefined' || typeof c == 'undefined' || (c != 1 && c != -1)) return false;
  c += 2;
  if (!f) f = location.pathname.match(/[^\\\/]+/i) + '';
  if (!f) return false;
  var h = $('#rate_' + d);
  g = $.extend({
  'before': function(a) {
  a.prev('a').remove();
  a.next('a').remove()
  },
  'after-success': function(a, b) {
  a.html(b).addClass(b > 0 ? 'positiveRate' : (b == 0 ? 'nullRate' : 'negativeRate'));
  _uWnd.alert('Оценка засчитана!')
  },
  'after-error': function(a) {
  try {
  eval(a)
  } catch (e) {}
  }
  }, g || {});
  g.before(h);
  $.post('/' + f + '/', {
  'a': '65',
  'id': d,
  'mark': c,
  'mod': f,
  'ajax': '2'
  }, function(a) {
  a = $('cmd:first', a).text();
  var b = a.match(/рейтинг:\s*([\d.]+)\/(\d+)/i);
  if (!b) return g['after-error'](a);
  b = Math.round(b[1] * b[2]) - 2 * b[2];
  g['after-success'](h, b)
  })
};
</script>


CSS оформление

Код

  <style>/* ===== Рейтинг ===== */
.rate_my_post {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #f5f6f8;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow:
  0 2px 6px rgba(0, 0, 0, .04),
  inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Общие стили кнопок */
.rate_my_post > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border-radius: 10px;
  text-decoration: none;
  transition:
  background .2s ease,
  color .2s ease,
  transform .15s ease,
  box-shadow .2s ease;
}

/* Убираем стандартный размер текста */
.rate_my_post > a {
  font-size: 0;
}

/* ===== Не нравится ===== */
.rate_my_post .orating_m::before {
  content: "−";
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.rate_my_post .orating_m {
  color: #6b7280;
}

.rate_my_post .orating_m:hover {
  color: #dc2626;
  background: #fee2e2;
}

.rate_my_post .orating_m:active {
  transform: scale(.9);
}

/* ===== Нравится ===== */
.rate_my_post .orating_p::before {
  content: "+";
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.rate_my_post .orating_p {
  color: #6b7280;
}

.rate_my_post .orating_p:hover {
  color: #16a34a;
  background: #dcfce7;
}

.rate_my_post .orating_p:active {
  transform: scale(.9);
}

/* ===== Число рейтинга ===== */
.rate_my_post > a.positiveRate,
.rate_my_post > a.nullRate,
.rate_my_post > a.negativeRate {
  width: 46px;
  min-width: 46px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 5px rgba(0,0,0,.04);
  cursor: default;
}

.rate_my_post b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* Положительный */
.rate_my_post .positiveRate {
  color: #16a34a;
}

/* Нулевой */
.rate_my_post .nullRate {
  color: #6b7280;
}

/* Отрицательный */
.rate_my_post .negativeRate {
  color: #dc2626;
}
.rate_my_post:hover {
  border-color: #d1d5db;
  box-shadow:
  0 4px 12px rgba(0, 0, 0, .07),
  inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* ===== Анимация изменения рейтинга ===== */
@keyframes rateUpdate {
  0% {
  transform: scale(.8);
  opacity: .4;
  }
  60% {
  transform: scale(1.12);
  }
  100% {
  transform: scale(1);
  opacity: 1;
  }
}
.rate_my_post b {
  display: inline-block;
  animation: rateUpdate .25s ease;
}
/* ===== Тёмная тема ===== */
@media (prefers-color-scheme: dark) {
  .rate_my_post {
  background: #18181b;
  border-color: #27272a;
  box-shadow:
  0 2px 8px rgba(0,0,0,.25),
  inset 0 1px 0 rgba(255,255,255,.03);
  }
  .rate_my_post > a.positiveRate,
  .rate_my_post > a.nullRate,
  .rate_my_post > a.negativeRate {
  background: #27272a;
  border-color: #3f3f46;
  }
  .rate_my_post .orating_m,
  .rate_my_post .orating_p {
  color: #a1a1aa;
  }
  .rate_my_post .orating_m:hover {
  color: #f87171;
  background: #3f2020;
  }
  .rate_my_post .orating_p:hover {
  color: #4ade80;
  background: #17351f;
  }
  .rate_my_post .positiveRate {
  color: #4ade80;
  }
  .rate_my_post .nullRate {
  color: #a1a1aa;
  }
  .rate_my_post .negativeRate {
  color: #f87171;
  }
}

/* ===== Мобильные устройства ===== */
@media (max-width: 600px) {
  .rate_my_post {
  padding: 3px;
  border-radius: 12px;
  }
  .rate_my_post > a {
  width: 34px;
  height: 32px;
  }
  .rate_my_post > a.positiveRate,
  .rate_my_post > a.nullRate,
  .rate_my_post > a.negativeRate {
  width: 42px;
  min-width: 42px;
  }
}</style>



Картинку залить к себе на сайт в папку img, На этом установке окончена.