» » >
Скрипт кнопки мне нравится для uCoz
23.09.2013, 16:32

Решение очень простое, мы заменим наш рейтинг новости, на кнопку мне нравиться которая версталась мной под DOCTYPE 1.1, я решил с нуля создать свою стилизацию кнопок

Для начало нам стоит удалить старый код рейтинга:

HTML-Code

if($RATING$)?><div style="float:right">$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div>endif?>

и за место него установить следующий код нужного модуля вашего сайта:

Для раздела новости (news)

if($RATING$)?>
  <div id="rating_os">
  <a 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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела каталог статей (publ)

if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/publ/0-1-1-$ID$-3',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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела каталог файлов (load)

if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/load/0-1-1-$ID$-3',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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела каталог сайтов (dir)

if($RATING$)?>
  <div id="rating_os">
  <a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/dir/0-1-1-$ID$-3',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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела блог (blog)

if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/blog/0-0-1-$ID$-14-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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела доска объявлений (board)

if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/board/0-1-1-$ID$-3',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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>
Для раздела Фотоальбом (photo)

if($RATING$)?>
  <div id="rating_os">
<a href="javascript://" id="golike" onclick="$.get('/photo/1-1-$ID$-13-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 id="rating_l">Mне нравится</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
endif?>

Теперь нам следует выбрать один из пяти вариантов стилизации кнопки:

Вариант № 1 White (Белый):

кнопка мне нравиться для ucoz, в белом варианте

CSS-Code

/* Mне нравится
------------------------------------------*/
#rating_os {  
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#777; text-shadow: 1px 1px 1px #fff;
  background:#f6f6f6;
  border: 1px solid #d6d6d6;
}  

#rating_os a:link,  
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#999;}

#rating_l {
  float:left;
  background: url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_white.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
}

#rating_l:hover {
  background: #fff url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_white.png) no-repeat right;
}

#rating_p {
  float:right;
  padding: 3px 5px 3px 5px;
  background:#e3e3e3;
}
Вариант № 2 Black (Чёрный):

кнопка мне нравиться для ucoz, в чёрном варианте

CSS-Code

/* Mне нравится
------------------------------------------*/
#rating_os {  
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
  background:#484848;
  border: 1px solid #252525;
}  

#rating_os a:link,  
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#a7a7a7;}

#rating_l {
  float:left;
  background: url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_black.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
}

#rating_l:hover {
  background: #5d5d5d url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_black.png) no-repeat right;
}

#rating_p {
  float:right;
  padding: 3px 5px 3px 5px;
  background:#6e6e6e;
}
Вариант № 3 Orange (Оранжевый):

кнопка мне нравиться для ucoz, в оранжевом варианте

CSS-Code

/* Mне нравится
------------------------------------------*/
#rating_os {  
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#fff;  
  background:#ffe5cd;
  border: 1px solid #ffa24a;
}  

#rating_os a:link,  
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#ff891a; text-shadow: 1px 1px 1px #fff; }

#rating_l {
  float:left;
  background: url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_orange.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
}

#rating_l:hover {
  background: #fff3e8 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_orange.png) no-repeat right;
}

#rating_p {
  float:right;
  text-shadow: 1px 1px 1px #ff891a;  
  padding: 3px 5px 3px 5px;
  background:#ffd0a4;
}
Вариант № 4 Blue (Синий):

кнопка мне нравиться для ucoz, в синем варианте

CSS-Code

/* Mне нравится
------------------------------------------*/
#rating_os {  
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  background:#dfecf4;
  border: 1px solid #97b7ca;
}  

#rating_os a:link,  
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#2C68A6;}

#rating_l {
  float:left;
  background: url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_blue.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
}

#rating_l:hover {
  background: #e5f5ff url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_blue.png) no-repeat right;
}

#rating_p {
  float:right;
  color:#235e9b;  
  padding: 3px 5px 3px 5px;
  background:#b5d9ee;
}


Вариант № 5 Green (Зелёный):

кнопка мне нравиться для ucoz, в зелёном варианте

CSS-Code

/* Mне нравится
------------------------------------------*/
#rating_os {  
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  background:#cdf6ce;
  border: 1px solid #48b543;
}  

#rating_os a:link,  
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#247e20;}

#rating_l {
  float:left;
  background: url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_green.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
}

#rating_l:hover {
  background: #e1fee2 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ugol_green.png) no-repeat right;
}

#rating_p {
  float:right;
  color:#247e20;  
  padding: 3px 5px 3px 5px;
  background:#8bdc87;
}

На этом всё...

Категория: Вид Рейтинга и Статистики | Добавил: tashkent97
Просмотров: 989 | Загрузок: 0 | Источник: center-dm.ru | Рейтинг: 4.3/6
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<