Стильная кнопка "Мне нравится" для uCoz
 | |
| Простой дизайн для подсчета виде рейтинг для всех модулей сайта uCoz, которая создана в синем оттенке, где дополнит стилистику ресурса. Думаю вам дизайн кнопки на рейтинг знакомый, так как полностью стиль взят от сервиса uSocialсо, где функций почти аналогичны. Только здесь если вы поставите или одобрите материал, то цифра изменится при обновление страницы. Также идет с ним CSS, что есть возможность для изменение самой фигуры и палитры цвета. Здесь проверял на темном портале, что добавил немного теней, что будут по умолчанию. Так как функциональность полная. А это при наведение меняется цвет, также происходит при клике. Вообщем отличное приложение будет под любую тематическую площадку, чтоб оценить разный материал. что на интернет ресурсе находится. HTML Код <?if($RATING$)?><a href="javascript://" onclick="$.get('/load/0-1-1-$ID$-3 ',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Уже лайкали!','',{w:100,h:40,t:2000}); else {_uWnd.alert('Принято +1','',{w:100,h:40,t:2000});$('#rate$ID$').text('+1');};});" class="zornet_ru_rating" rel="nofollow" onclick="add_enterthesite();"style="margin-bottom: 2px;"><center><div class="title">Мне нравится!</div><div class="counter">$RATED$</div></center></a><?endif?> CSS Код .zornet_ru_rating {width:auto;background: #3d4f9e;color: #ebeef7;border: 1px solid;border-color: #b6b8bd;text-decoration: none;line-height: 16px;padding: 7px 14px;display: inline-block;border-radius: 30px;outline: none;font-size: 14px;font-family: 'Open Sans', sans-serif;letter-spacing: 0.5px;transition: background .2s ease, color .2s ease, border .2s ease, box-shadow .3s ease;-webkit-transition: background .2s ease, color .2s ease, border .2s ease, box-shadow .3s ease;text-decoration: none;box-shadow: 0px 1px 13px rgba(148, 148, 148, 0.54), 0px 10px 30px -15px rgba(119, 115, 115, 0.52);} .zornet_ru_rating:hover {background: #0e2c5f;border-color: #56585a;color: #f3ecec;text-decoration: none;box-shadow: 0px 1px 3px rgba(150, 146, 146, 0.91), 0px 10px 30px -15px rgb(103, 100, 100);} .zornet_ru_rating:active {background: #2f3031;border-color: #E4E5E7;color: #f5eded;text-decoration: none;} .counter {display: inline-block;vertical-align: middle;line-height: 17px;border: 1px solid #d9e0e6;padding: 1px 5px 0;border-radius: 10px;font-size: 13px;margin: 0 0 0 5px;min-width: 34px;text-align: center;float: right;width: auto;height: auto;} .title {display: inline-block;vertical-align: middle;line-height: 21px;float: left;text-align: left;width: calc(100% - 70px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: auto;height: auto;} PS - изначально все настроенно под каталог файлов. Источник: webmaster-ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
