Знаки отличия на персональной странице uCoz

Знаки отличия на персональной странице uCoz

11.07.2015308413admin

Знаки отличия будут стимулировать пользователя на различные действия на сайте. В нашем примере один знак дается за добавленный файл, другой за комментарий, третий за пост на форуме и т.д. По аналогии вы можете усложнить код, сделать отдельные награды за первый пост на форуме, за 10, за 20 и т.д.

Ранее на известном сайте Center-DM предлагалась целая стенка из наград, которые как бы нужно разблокировать, некий квест. Идея даже интересная, но наш вариант представляет собой монументальные знаки отличия, пользователь за небольшое время может собрать 5 штук и успокоиться. Сделали новый скрипт по аналогии с нашими наградами на Урааа, только добавили анимацию при наведении.

Установка

Вставьте код на персональную страницу пользователя в том месте где хотите видеть знаки отличия:

Код
<div class="signsOver">
<?if($_LOAD_ENTRIES$>0)?><div class="signOne sLoad"><span><i>Знак выдается за первый файл</i></span></div><?endif?>
<?if($_COM_ENTRIES$>0)?><div class="signOne sComments"><span><i>Знак выдается за коммен-<br>тарии</i></span></div><?endif?>
<?if($_FORUM_ENTRIES$>0)?><div class="signOne sForum"><span><i>Знак выдается за активность на форуме</i></span></div><?endif?>
<?if($_REPUTATION$>0)?><div class="signOne sReputation"><span><i>Знак выдается за хорошую репутацию</i></span></div><?endif?>
<?if($_AVATAR$)?><div class="signOne sAvatar"><span><i>Знак выдается за установку аватара</i></span></div><?endif?>
<?if($_EMAIL_IS_VERIFIED$)?><div class="signOne sProtect"><span><i>Знак выдается за подтверж-<br>денный<br>E-Mail</i></span></div><?endif?>
</div>

<style type="text/css">
.signsOver {width:100%;}
.signsOver * {transition: all linear .2s; -moz-transition: all linear .2s; -webkit-transition: all linear .2s; -o-transition: all linear .2s;}
.signOne {display:inline-block;width:100px;height:100px;position:relative}
.signOne:hover span {opacity:1;margin-top:0px}
.signOne span {opacity:0;margin-top:20px;cursor:help;width:100%;height:100%;top:0;left:0;position:absolute;background:rgba(0,0,0,0.7);color:#FFF;font-size:11px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.signOne span i {font-style:normal;padding:10px;display:block}
.sLoad {background:url('http://yraaa.ru/_pu/25/63354628.png') center no-repeat}
.sComments {background:url('http://yraaa.ru/_pu/25/45575411.png') center no-repeat}
.sForum {background:url('http://yraaa.ru/_pu/25/47909650.png') center no-repeat}
.sReputation {background:url('http://yraaa.ru/_pu/25/32575082.png') center no-repeat}
.sProtect {background:url('http://yraaa.ru/_pu/25/45136495.png') center no-repeat}
.sAvatar {background:url('http://yraaa.ru/_pu/25/15996736.png') center no-repeat}
</style>

Рекомендуется загрузить изображения в стилях на свой сайт, а стили поместить в ваш CSS-файл.

Демо

Результат работы кода выше выглядит так:

Знак выдается за первый файл
Знак выдается за коммен-
тарии
Знак выдается за активность на форуме
Знак выдается за хорошую репутацию
Знак выдается за установку аватара
Знак выдается за подтверж-
денный
E-Mail

Отличные плоские иконки были найдены на IconFinder, мы упоминали этот и другие сервисы иконок. Советуем использовать изображения с размером 64x64.




Сохраните в социальную сеть
Комментарии (13)
STORM 11.07.2015 в 10:34Спам
Спс отличное украшение персональной странице лови +++
6
Тигран 11.07.2015 в 11:43Спам
Наконец осуществили мою идею. Плюс и только плюс.
2
Deniss Lvov 11.07.2015 в 13:28Спам
Блин не поверите но маю тоже!
0
"Маю". Ясно.
3
Динар 11.07.2015 в 19:28Спам
Не верю Вам обоим, ахах!
0
Deniss Lvov 11.07.2015 в 19:52Спам
Ну и не верь )))
0
watceric 11.07.2015 в 23:49Спам
прекрасно работает, благодарю :D
3
Яотк 12.07.2015 в 16:19Спам
Спасибо)
2
Rus Lan 14.07.2015 в 10:30Спам
Года 3 назад помню копипастил код себе на сайт :D Ток у меня тогда коряво вышло, но всё равно было почти не отличить)
0
Если у вас есть желание то можно целую доску таких наград придумать. За конкретное количество материалов и т.д.
0
Ильяс 11.07.2016 в 18:15Спам
не подскажешь как?
1
Roma Morgunov 20.07.2015 в 18:01Спам
Ооо отлично подошло в персоналку! Спасибо
1
И мне выглядит шикарно)))
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт