» »

Цифровой рейтинг звезд для сайта на CSS

Цифровой рейтинг звезд для сайта на CSS

Оригинальный стиль рейтинга для сайта, который содержат в себе как цифровое значение, так и дизайн звезд, что выполнено при помощи CSS и JS. Любой рейтинг на интернет ресурсе является для многих классическим явлением, как для стилистики сайта, включая дизайн, также интерфейс пользователя. Теперь при установки рейтинга, а это происходит на звездной половине, то автоматически отображается на цифровой.

Где ниже можно заметить прописанное значение, которое повествует, это сколько пользователей или гостей, если он доступен проголосовало. Все смотрится компактно и стильно, что можно его увидеть как на светлом формате, так и на темном. Если нужно в палитре цвета есть варианты поставить другую палитру, чтоб соответствовало основному дизайну сайта.

Так он выглядит на темном фоне:

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

Здесь можно рассмотреть, как реально смотрится на вид материалов и комментариев, где видно обвод, который также соответствует рейтингу и вид на прямую от него идет.

Скрипт рейтинга на темный по дизайну сайт

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

По месту ставим, где хотите видеть рейтинг.

Код
<div class="rating">  
<div class="rat" data-count="$RATING$" data-name="Рейтинг"></div>  
<span class="ret">  
<script src="http://zornet.ru/ABVUN/Abas/degakolas/rat.js"></script>  
<?$RSTARS$('24','http://zornet.ru/ABVUN/Abas/rating_star_03.png','1','float')?>  
<span class="vote-num">Всего проголосовали: $RATED$</span>  
</span>  
</div>  
<style>  
/*=============================rating==========================*/  
.rating {margin-left: 40px;}  
.rat {position: relative;float: left;width: 55px;height: 55px;border-radius: 50%;box-shadow: inset 0 0 0 2px #354052;}  
.rat > div {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;color: #e2e2e2;display: block;text-align: center;font-size: 19px;font-weight: 500;padding-top: 16px;}  
.rat > div div {display: none;}  
.ret {float: left;margin-left: 10px;margin-top: 4px;}  
</style>

Установка простая, ставим там где считаете нужным, но безусловно должно быть на самом материале, так как оценка производится на страницы с конкретным контентом.
2019-01-18 Просмотров: 489 Комментарий: (30)

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

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

Комментарий: 30
Grician
Grician 2019-01-18 07:021
0
Не отображается цифровой рейтинг
Grician
Grician 2019-01-18 07:042
0
First
First 2019-01-18 09:493
0
Этого и следовало было ожидать. Просто не надо было администратору стили и классы менять, так как скрипт может быть привязан к ним. Возьми рабочий от СЮДА в комменте под спойлером
Grician
Grician 2019-01-18 12:214
0
А почему, когда нажимаешь на звездочку, перебрасывает на черный экран?
First
First 2019-01-18 12:375
0
Не могу ответить не видя сайта где установлен рейтинг. У меня работает отлично, ну а вы может в тег <a> впихнули, или что-то подобное
Grician
Grician 2019-01-23 07:5429
0
Почему не показывает цифровой рейтинг
veryscary.ru/load/filmy/dobro_pozhalovat_v_zombilehnd_zombieland/1-1-0-176
Kosten
Kosten 2019-01-23 16:2130
0
Все работает, просто скрипт редактировали, что попробуйте заново поставить. Или просто JS поменять, старую ссылку убрать, а эту поставить.

http://zornet.ru/ABVUN/Abas/degakolas/rat.js
Kosten
Kosten 2019-01-18 15:386
0
На тестовом проверил код, тот что First в кометах (что здесь поменяю) оставил, что то понять не могу, форма круга не чего не выводит, что то на сайте нужно подключать?

First
First 2019-01-18 16:287
0
Какой именно код не выводит?
Kosten
Kosten 2019-01-18 16:328
0
Тот который ты в комментариях прописал.

Вот установка: forums.ucoz.com/load/jarost_smertnaja_kazn_2014_smotret_onlajn/1-1-0-14
First
First 2019-01-18 16:419
0
А я вижу что выводит, даже оценил
Kosten
Kosten 2019-01-18 17:0010
0
Вот опять, все забываю выключать резчик по рекламе при проверки скриптов, все нормально показывает.
Kosten
Kosten 2019-01-18 17:0811
0
Прикольно на темном формате смотрится, здесь не нужно не чего менять, если на светлый переводить.

First
First 2019-01-18 17:1212
0
Только в твоем случаи нужно отступ сверху ставить не 16px a 12px. Что за резчик такой, что скрипты режет? У меня ведь тоже блокировщик рекламы и нормально.
Kosten
Kosten 2019-01-18 17:1513
0
Да, еще как режет, просто иногда забываю, и так вот получается, это за приложение AdGuard идет речь.
First
First 2019-01-18 17:1614
0
Цитата Kosten ()
здесь не нужно не чего менять, если на светлый переводить
А кроме цвета шрифта ты в стилях и поменять ничего не сможешь. Цвета круга меняется в самом скрипте, и по этому это лучше загружать себе, так как если кто-то изменит у себя от куда скрипт, так изменится цвет у всех
Kosten
Kosten 2019-01-18 19:1915
0
Но по сути можно подогнать цветовую палитру под разный дизайн, он как понял в стилистике идет, основной, также в файле видать присутствует.
Mix5280
Mix5280 2019-01-21 13:0116
0
Выдрали откуда то не знамо что. Что это за класс class="vote-num" в стилях его нет.

Код
$('.rat').each(function() {  
var circleBox = $(this),  
circleRate = circleBox.data('count'),  
circleRateName = circleBox.data('name'),  
circleRatePerc = circleRate/5;  
circleBox.append('<div>'+circleRate+'<div>'+circleRateName+'</div></div>');  
setTimeout(function () {  
circleBox.circleProgress({  
size:55,  
startAngle:-1.5,  
lineCap:'round',  
value: circleRatePerc,  
emptyFill:'#354052',  
thickness:2,  
animation: false,  
fill: {gradient:['#88b669']}  
});  
});  
});


Круговой индикатор (5 ШТУК ) kottenator.github.io/jquery-circle-progress
First
First 2019-01-21 15:1617
0
Цитата Mix5280 ()
Выдрали откуда то не знамо что. Что это за класс class="vote-num" в стилях его нет.

Это проблема? Я просто убрал его у себя. Добавь если нужно
Код
.vote-num {font-size:11px}

Что-то не нравится, просто обойди стороной, или "выдери" сам

А себе я скрипт именно в таком виде как ты показал поставил, и писал об этом, что цвета меняются в скрипте, и у кого есть голова сам его достанет с общего
Mix5280
Mix5280 2019-01-21 15:4118
+1
Цитата First ()
Что-то не нравится, просто обойди стороной, или "выдери" сам

Людей дурят, - не нравится. А претензии не к вам а к администратору этого сайта, он вообще понимает что нибудь. Выкладывает, люди ставят не понимая что к чему, веря в знания администратора.
Цитата First ()
А себе я скрипт именно в таком виде как ты показал поставил,

Вот именно что себе родному поставил как надо. Это не красиво.
Kosten
Kosten 2019-01-21 16:5919
0
Mix5280, можно подробнее, кого дурят, если предьява, то нужно ее обосновать, просто дурят это не прокатит. Плиз объясните, в чем дурят, где хочу внести стразу, что если кого то дурят, значит кто то что то хочет поиметь.

Ждемс!
1 2 »
avatar