» »

Стильная кнопка "Мне нравится" для uCoz

Стильная кнопка "Мне нравится" для 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
11.02.2018 Просмотров: 607 Комментарий: (3)

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

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

Комментарий: 3
avatar
otgamera 03.04.2018 02:261
0
КАК НАСТРОИТЬ ПОД БЛОГ?
-SAM-
-SAM- 03.04.2018 05:182
0
Там нужно менять адрес, куда посылается запрос, в соответствии с выбранным модулем. Вот выписка, которая попадалась в аналогичном материале на кнопку рейтинга (не проверял лично, смотрите блок "Похожие материалы"):
  • Блог [blog]: /blog/0-0-1-$ID$-14-1
  • Новости сайта [news]: /news/0-0-1-$ID$-15-1
  • Каталог файлов [load]: /load/0-1-1-$ID$-3
  • Каталог статей [publ]: /publ/0-1-1-$ID$-3
  • Каталог сайтов [dir]: /dir/0-1-1-$ID$-3
  • Доска объявлений [board]: /board/0-1-1-$ID$-3
  • Онлайн игры [stuff]: /stuff/0-1-1-$ID$-3 (или /stuff/1-1-0-$ID$ - не ясно какой правильно брать).
  • Фотоальбом [photo]: /photo/1-1-$ID$-13-1 (также в сети есть вариант /photo/4-1-$ID$-13-5 - я не в курсе какой из них правильный).
  • Вопросы ответы [faq]: /faq/0-1#$ID$
Что касается модуля "Видео", то вот на такое наткнулся (возможно, что есть, но когда решение делали, то модуля либо еще не было, либо просто пропустили).
Также подшита тема на форуме, что можно в ней задать еще интересующие вопросы относительно данного решения.
na3uTuB4uk
na3uTuB4uk 03.04.2018 16:013
+1
Я вот так для онлайн игр использую, вполне все отлично работает, ну если кому надо конечно)
Код
<a href="javascript://" onclick="$.post('/stuff/', { 'a':'65','id': '$ID$', 'mark': '5','mod':'stuff'}, function(data) { if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:230,h:80,t:3000} ); else {_uWnd.alert('Ваш голос учтен!','Успех',{w:230,h:80,t:3000});$('#rating_like$ID$').text('Like <?$RATED$+1?>');}; } );">кнопка</a>
avatar