Приветствую Вас Прохожий | RSS Вторник, 28.02.2017, 01:38
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 11
Гостей: 11
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Рейтинг материала в процентах

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


Установка этого скрипта не требует мучении, его просто надо вставить в CSS, и так приступим,
Вставьте нижний код в ваш CSS:
Code
/* progress reted */
.uprogress{
  width:216px;
  height:41px;
  background:url(http://test-ucozon.do.am/files/bg_bar.gif) no-repeat 0 0;
  position:relative;
}
.uprogress span{
  position:absolute;
  display:block;
  width:200px;
  height:25px;
  background: #369; no-repeat 0 0;
  top:8px;
  left:8px;
  overflow:hidden;
  text-indent:-8000px;
}
.uprogress mir{
  position:absolute;
  display:block;
  width:200px;
  height:25px;
  background:#778899; repeat-x 0 0;
  top:0;
}

/* progress reted end */

А этот код на странице материала:
Code
<p class="uprogress">
  <span><mir style="left:$RATED$px"></mir>$READS$/$RATED$%</span>
  </p>



Настройки: Как видите на скрине я установил синие и серые цвета для прогресса, но вы можете их сменить под свой шаблон, таким образом:
.uprogress span{
position:absolute;
display:block;
width:200px;
height:25px;
background: #369; no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
Где background: "#369;" измените сам цвет прогресса, то есть линию,


А это уже внутренний фон индикатора
.uprogress mir{
position:absolute;
display:block;
width:200px;
height:25px;
background:#778899; repeat-x 0 0;
top:0;
Где background:#778899; измените под свой вкус!


Автор: мир_младший
Автор\Источник: ucozon.ru

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2176 | Комментарии: 2 | Рейтинг: 3.7/3 | |Категория: Скрипты Разное | Добавил: STAFF | Дата: 06.07.2011 | Скачали: 0 | Теги: процентах, рейтинг, материала
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
2 darkness86   Дата: 07.08.2011  Время: 11:21   [№ 9907]
Ничего не поменялось((

+1   Спам
1 зоркий   Дата: 07.07.2011  Время: 05:52   [№ 9391]
супер!


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Нужны дизайнеры

1

2 Комплексный прогон сайт...

51

3 Вакансия копирайтера/пе...

1

4 Верстка

13

5 Файловик. Уникальные те...

1

6 Продажа ручного рерайта...

0

7 Куплю сайты с трафиком

0

8 Баннер 88х31

11

9 Оцените макет на тему W...

7

10 Оценка картинки

6


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru