Кнопка лайк как на Facebook
Очень стильная кнопка лайков.

Недавно решил переделать скрипт Лайк для Ucoz в стиле Facebook. Убрал ошибки, изменил вид, добавил новые дополнения. Теперь после оценки изменить знак лайка и надпись. Если вы всё-таки решите добавить новые возможности или переделаете его прошу сообщить мне, будет интересно поглядеть =) Кнопка выглядит вот так:



Добавляем этот код туда, где хотим его увидеть:


Код
<?if($RATE_FORM$)?><left><a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});"><div><span class="pic"><img src="http://manucoz.ru/uploads/posts/2014-12/1419103531_41005429.png" title="Нравится" style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"></a> </span></div><div class="send"><span class="liker" title="Голосов">$RATED$</span></div><?else?><a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});"><div><span class="pic2"><img src="http://manucoz.ru/uploads/posts/2014-12/1419103564_99335566.png" title="Вам уже понравилось" style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"></a> </span></div><div class="send2"><span class="liker2" title="Голосов">$RATED$</span></div></left><?endif?>  
<style>  
.liker {float:left; margin:auto; padding-top: 10px; padding-left: 5px;}  
.pic {float:left; margin:auto; position: relative; top: -2; left: 3px;}  

.liker2 {float:left; margin:auto; padding-top: 10px; padding-left: 5px;}  
.pic2 {float:left; margin:auto; position: relative; top: -2; left: 3px;}  
</style>
  

Материал взят с сайта http://manucoz.ru/

Всего комментариев: (0)

_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Делаем красивый вид материалов
Делаем красивый вид материалов
Антиспам для комментариев на условных операторах
Антиспам для комментариев на условн
Простой плагин для создания анимации на сайте
Простой плагин для создания анимаци
Новое, красивое оповещение ЛС для ucoz
Новое, красивое оповещение ЛС для u
Белые Ajax окна для uCoz
Белые Ajax окна для uCoz
Сколько времени тому назад был добавлен материал для сайтов на uCoz
Сколько времени тому назад был доба