ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Светлый дизайн рейтинга + и - для uCoz

Светлый дизайн рейтинга + и - для uCoz

Светлый дизайн рейтинга + и - для uCoz
Здесь представлен код рейтинга, виде плюса и минуса, где закреплены знаки под лайки, что смотрится просто великолепно на любом по тематике сайте. Ведь по своему дизайну его можно видеть в кино сайте или не тематическом блоге, где будет написана статья. Что при установке пользователи могут реально оценить данный контент, ведь он будет располагаться вид материалов и комментариев к нему, а точнее рядом с данным контентом, это может быть просто видео или прописанные уроки, как сделать или выполнить некое решение.

Но его функция понятна по своему функционалу, теперь по стилистику. Ведь этот рейтинг выполнен по светлую гамму цвета. А у некоторых темный сайт или под другой палитрой идет. И здесь нам пригодятся стили CSS, которые закреплены за кодом. Там мы не просто цвет можем изменить, а также красиво оформить кнопки. К примеру по установке вы увидите немного серый рейтинг, где цветовая палитра прописана сверху и снизу, что дает нам сделать красивое оформление под любой фон. Что располагаться на сайте под цветовую палитру.

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

Стильный рейтинг с лайками

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

Кнопки рейтинга по клику на сайт

Расположение разное, к примеру здесь будет отличным решение, как под данными, кто разместил контент.

Создание рейтинга на систему ucoz

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

Установка:

1. Нужно скачать архив, там находиться файл getRate2.js, что заливаем его в папку js на файловом менеджере.

2. Далее устанавливаем стиль на шрифтовые иконки, если вы еще не установили, это вверх или низ сайта.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML

Код
<script src="/js/getRate2.js"></script>
<div class="fbtm fx-row fx-middle ignore-select fbtm-two" style="float:right; text-decoration:none;">
<div class="otsenka fx-row">
<div class="flike"><a href="#" onclick="getRate(1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне нравится!"><span class="fa fa-thumbs-up"></span><span class="reyting_kontenta"><span id="plus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>
<div class="fdislike"><a href="#" onclick="getRate(-1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне не нравится!"><span class="fa fa-thumbs-down"></span><span class="reyting_kontenta"><span id="minus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>  
<script type="text/jаvascript">setRating($RATING$,$RATED$,$ID$)</script>  
</div>
</div>

CSS

Код
.fx-row{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;  
}

.otsenka .fa {
  margin: 0 8px 0 0;
  font-size: 20px;
  color: #0b9144;
  text-shadow: 0 1px 0 #797e7c;
}

.otsenka .fdislike .fa {
  color: #fb240e;
}

.otsenka a {
  margin-left: 15px;
  display: block;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(155 155 155 / 40%);
  border-radius: 3px;
  box-shadow: 0 1px 3px 0 rgb(185 185 185 / 27%);
  font-size: 14px;
  color: #857e7e;
  font-weight: 700;
  background: linear-gradient(to bottom, #efe8e8 0%, #fffbfb 30%, #d7d8db 100%);
}

.reyting_kontenta{
display: inline-block;
border-left: 1px solid rgba(0, 0, 0, .1);
padding-left: 10px;
}

.otsenka a:hover {
  color: #646161;
  background: linear-gradient(to top, #d3d3d3 0%, #f1f1f1 30%, #e9e9e9 100%);
}

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

Демонстрация
Автор скрипта: likbezz
Дизайн изменен: Forza
Источник: nk-cs.ru
2022-01-20 Загрузок: 8 Просмотров: 578 Комментарий: (11)

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

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

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

Комментарий: 11
avatar
MaLoI8304 2022-05-16 22:161
0
Добрый день. А как сделать его адаптивным?

А еще я его установил, но у меня выходи ошибка: Non-existent entry!

Как исправить?
Kosten
Kosten 2022-05-16 23:022
0
Ошибка может появятся с обновление конструктора uCoz, что по адаптивности, но не думаю что они так будут востребованы на небольшом экране, здесь больше наоборот на малых экранах рейтинг скрывают.

У вас постоянно ошибка появляется,или все таки рейтинг работает, и ошибка иногда появляется. Так как сам их устанавливал, это ранее и проверял, все работало корректно.
avatar
MaLoI8304 2022-05-17 13:343
0
Постоянно ошибка появляется
Kosten
Kosten 2022-05-17 17:354
0
Значит код нужно переписывать, хотя подождите, в коде прописано "load" - что означает, что будет работать только на каталоге файлов. Если у вас на другом каталоге, это блог или новость, то load идет по файлы, вам нужно поменять на тот каталог, где размещаете.
avatar
MaLoI8304 2022-05-17 18:016
0
Да, теперь работает. Но очень криво. Когда делаешь лайк он ставит вместо 1 цифру 10. А когда обновляешь страницу все цифры пропадают
Kosten
Kosten 2022-05-17 21:157
0
Вы везде сменили, так как источник проверенный, и все на сайте ранее проверялось.

avatar
MaLoI8304 2022-05-20 23:128
0
Да я везде заменил. Он все равно считает как 10, а потом при обновлении съезжает и вообще ничего не показывает
avatar
MaLoI8304 2022-05-20 23:169
0
Срин на рейтинг.

Kosten
Kosten 2022-05-21 12:4010
0
Почему так не знаю, когда скрины снимал, то они все с тестового сайта, и все работало, нужно найти тестовый сайт и проверить.
Kosten
Kosten 2022-05-21 19:2611
0
Вижу, что даже шрифтовые кнопки не подключили, но главное, вы подключили функции виде файла getRate2.js в корень сайта.
Kosten
Kosten 2022-05-17 17:435
0
Вот как пример, значение каталогов, если в коде стоит на файлы, а вы ставите на другой, то найдите значение своего каталога и поменяйте на свой.

Для модуля - Каталог сайтов: /dir/
Для модуля - Каталог статей: /publ/
Для модуля - Каталог файлов: /load/
Для модуля - Каталог игр: /stuff/
Для модуля - Блог: /blog/
Для модуля - Фото альбом: /photo/
Для модуля - Вопросы ответы: /faq/

В коде прописан load
avatar