ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Цифровой рейтинг звезд для сайта на 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>

Установка простая, ставим там где считаете нужным, но безусловно должно быть на самом материале, так как оценка производится на страницы с конкретным контентом.

18 Января 2019 Просмотров: 2722 Комментариев: (50)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 50
Порядок вывода комментариев: Grician 18 Января 2019 07:02¹ 0 Не отображается цифровой рейтинг Grician 18 Января 2019 07:04² 0 First 18 Января 2019 09:49³ 0 Этого и следовало было ожидать. Просто не надо было администратору стили и классы менять, так как скрипт может быть привязан к ним. Возьми рабочий от СЮДА в комменте под спойлером Grician 18 Января 2019 12:21⁴ 0 А почему, когда нажимаешь на звездочку, перебрасывает на черный экран? First 18 Января 2019 12:37⁵ 0 Не могу ответить не видя сайта где установлен рейтинг. У меня работает отлично, ну а вы может в тег <a> впихнули, или что-то подобное Grician 23 Января 2019 07:54²⁹ 0 Почему не показывает цифровой рейтинг veryscary.ru/load/filmy/dobro_pozhalovat_v_zombilehnd_zombieland/1-1-0-176 Kosten 23 Января 2019 16:21³⁰ 0 Все работает, просто скрипт редактировали, что попробуйте заново поставить. Или просто JS поменять, старую ссылку убрать, а эту поставить. http://zornet.ru/ABVUN/Abas/degakolas/rat.js Kosten 18 Января 2019 15:38⁶ 0 На тестовом проверил код, тот что First в кометах (что здесь поменяю) оставил, что то понять не могу, форма круга не чего не выводит, что то на сайте нужно подключать? First 18 Января 2019 16:28⁷ 0 Какой именно код не выводит? Kosten 18 Января 2019 16:32⁸ 0 Тот который ты в комментариях прописал. Вот установка: forums.ucoz.com/load/jarost_smertnaja_kazn_2014_smotret_onlajn/1-1-0-14 First 18 Января 2019 16:41⁹ 0 А я вижу что выводит, даже оценил Kosten 18 Января 2019 17:00¹⁰ 0 Вот опять, все забываю выключать резчик по рекламе при проверки скриптов, все нормально показывает. Kosten 18 Января 2019 17:08¹¹ 0 Прикольно на темном формате смотрится, здесь не нужно не чего менять, если на светлый переводить. First 18 Января 2019 17:12¹² 0 Только в твоем случаи нужно отступ сверху ставить не 16px a 12px. Что за резчик такой, что скрипты режет? У меня ведь тоже блокировщик рекламы и нормально. Kosten 18 Января 2019 17:15¹³ 0 Да, еще как режет, просто иногда забываю, и так вот получается, это за приложение AdGuard идет речь. First 18 Января 2019 17:16¹⁴ 0 Цитата Kosten () здесь не нужно не чего менять, если на светлый переводить А кроме цвета шрифта ты в стилях и поменять ничего не сможешь. Цвета круга меняется в самом скрипте, и по этому это лучше загружать себе, так как если кто-то изменит у себя от куда скрипт, так изменится цвет у всех Kosten 18 Января 2019 19:19¹⁵ 0 Но по сути можно подогнать цветовую палитру под разный дизайн, он как понял в стилистике идет, основной, также в файле видать присутствует. Mix5280 21 Января 2019 13:01¹⁶ 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 21 Января 2019 15:16¹⁷ 0 Цитата Mix5280 () Выдрали откуда то не знамо что. Что это за класс class="vote-num" в стилях его нет. Это проблема? Я просто убрал его у себя. Добавь если нужно Код .vote-num {font-size:11px} Что-то не нравится, просто обойди стороной, или "выдери" сам А себе я скрипт именно в таком виде как ты показал поставил, и писал об этом, что цвета меняются в скрипте, и у кого есть голова сам его достанет с общего Mix5280 21 Января 2019 15:41¹⁸ +1 Цитата First () Что-то не нравится, просто обойди стороной, или "выдери" сам Людей дурят, - не нравится. А претензии не к вам а к администратору этого сайта, он вообще понимает что нибудь. Выкладывает, люди ставят не понимая что к чему, веря в знания администратора. Цитата First () А себе я скрипт именно в таком виде как ты показал поставил, Вот именно что себе родному поставил как надо. Это не красиво. Kosten 21 Января 2019 16:59¹⁹ 0 Mix5280, можно подробнее, кого дурят, если предьява, то нужно ее обосновать, просто дурят это не прокатит. Плиз объясните, в чем дурят, где хочу внести стразу, что если кого то дурят, значит кто то что то хочет поиметь. Ждемс!
1 2 3 »