» »

Цифровой рейтинг ленты новостей для uCoz

Цифровой рейтинг ленты новостей для uCoz

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

Сам дизайн был немного изменен, по умолчанию просто шли цифры и по сторонам знаки, как плюс и минус, что реально было мало заметно. Здесь поставил ему лайки по сторонам с теме же красками, которые можно как увеличить прямо в коде, так и уменьшить. Также вы можете установить шрифтовые иконки или найти другие картинки, которые бы вас устраивали и подходили под основной дизайн сайта. Все очень просто делается, что и вывел само табло, где и будет показывать рейтинг. Он работает по своей функция как на PHP, но его здесь не нужно, что если производите клик, то сразу появляется число. На его идет стили, где вы можете вывести свой не похожий на другие скрипты такого характера, что ниже представлено.

Можно по стилистике сделать по разному, что в положительную идет.

1. В плюс выставлено, где закругленное табло.



2. Это уже на 5 пикселей закруглены углы.



3. Под темной гаммой цвета поставлено в стилях.



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

1.1 Закругленно на 100 пикселей или процентов.



2.2 Ставим аналогичные пять пикселей, чтоб немного уграть острые углы.



3.3 Осталось просто изменить цвет, как на обвод так и на саму основу.



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

Приступаем к установке:

Идем в админ панель, в новости и открываем вид материала, если у вас там уже стоит рейтинг звезды или другой, то можно его убрать и на это место прописать этот скрипт.

Код
<script type="text/javascript" src="http://zornet.ru/zorner_ru_1/Veb/zornet.js"></script>  
<?if($RATE_FORM$)?><a href="#" onclick="rateForm(-1,$ID$);return false"><img style="margin: 0 0 -4px;" alt="" src="http://zornet.ru/zorner_ru_1/Veb/3KrPflikSHWYVnbPTmxudg.png" width="17" border="0" title="Плохой пост"></a><?endif?>  
<span class="rating-kp-imdb" style="border: 2px solid #aeb7c3"> <b title="Голосов: $RATED$" id="rate_$ID$" class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b></span>  
<?if($RATE_FORM$)?><a href="#" onclick="rateForm(1,$ID$);return false"> <img style="margin: 0 0 -1px;" alt="" src="http://zornet.ru/zorner_ru_1/Veb/CUJOvQWrQ9ihBWRT-Lh7Zg.png" width="17" border="0" title="Хороший пост"> </a><?endif?>


Осталось поставить в CSS стили:

Код
.rating-kp-imdb {
  padding: 1px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 5px;
  background: #e0d8d8;
}  
   
.positiveRate {color:#087708;}  
.negativeRate {color:#e01010;}  
.nullRate {color:#e01010;}

Так проверял его на работоспособность и можете оценить как смотрится на светлом интернет ресурсе.

Красивый цифровой рейтинг для сайта


Первый стиль rating-kp-imdb и все что с ним связано, то они отвечают за цвет отвода, и оттенок цвета основы, это фон, где будут цифры.

Второй positiveRate и также все что идет ниже, это за знаки, а точнее за зеленый и красный, что здесь можно как основу поставить под свой портал и настроить цифры, так как возможно другие оттенки, если говорить о темном интернет ресурсе, здесь каждому индивидуальный подход.
16.06.2017 Просмотров: 519 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
ucozmental
ucozmental 17.06.2017 19:061
0
Все хорошо, но не до концы выводит, просто в темном цвете появляется и только когда обновишь страницу, то только после этого, будет цвет, зеленый или красный.
Kosten
Kosten 17.06.2017 19:132
+1
Есть такое, так как скрипт взят с другого рейтинг, и там просто цвет табло менялся, а вот цифры в одной гамме были, здесь же все наоборот, по большому счету не очень важно, все же автоматически появляется, только цвет после перезагрузки.
Сопрано
Сопрано 17.06.2017 19:313
0
Нет не какой разницы - если не кто оценивать не будет - для этого яркий нужен.
Gerat
Gerat 18.06.2017 02:474
0
Это хорошо, что в коде класс margin уставлен, который будет отвечать, поднять выше лайк или ниже и у каждого он стоит. Это добавлено, так в сети этот рейтинг есть, только не такой по дизайн, и там все просто, это плюс и минус, хотя можно было сделать как здесь, чтоб все на стилях было. Или как вариант поставить шрифтовые иконки, по мне должно быть намного лучше, по дизайн возможно.
Kosten
Kosten 18.06.2017 04:505
0
Пришлось поставить, просто они не ровно изображение на клики стояло, теперь сами можете поставить и выровнять, хотя как на скринах, так уже поставлено.
avatar