» » >
Кнопка Like для uCoz в стиле flat
·
29.09.2013, 00:34

Всем привет, сегодня в этой заметке мы будем заменять на странице материала и комментариев к нему, вид рейтинга звёзд на кнопку Like для uCoz, с авто обновлением. Сразу скажу, что данная версия кода работает во всех модулях, кроме модуля Видео и Интернет магазин, но для начала смотрим демо.

Шаг 1 - Установим HTML:

Для начала нам следует установить для того или иного модуля uCoz на страницу комментариев один из двух html каркасов:

HTML для 1,2,3,4 примеров

if($RATING$)?>
  <div class="rating_like" id="rating_like$ID$">
  <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});$('#rating_like$ID$').text('+$RATED$+1?>');};}); ">
  <div class="rating_like_r">Like if($RATED$)?>+else?>endif?>$RATED$</div>
  </a>
  </div>
endif?>

или

HTML для 5 примера

if($RATING$)?>
  <div class="rating_like" id="rating_like$ID$">
  <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});$('#rating_like$ID$').text('+$RATED$+1?>');};}); ">
  <div class="rating_like_l">Like</div>  
<div class="rating_like_r">if($RATED$)?>+else?>endif?>$RATED$</div>
  </a>
  </div>
endif?>

в данном html коде нам следует заменить следующий участок кода /publ/0-1-1-$ID$-3, на код того модуля в который вы устанавливаете данное решение:

Для модуля - Каталог сайтов: /dir/0-1-1-$ID$-3
Для модуля - Каталог статей: /publ/0-1-1-$ID$-3
Для модуля - Каталог файлов: /load/0-1-1-$ID$-3
Для модуля - Каталог игр: /stuff/1-1-0-$ID$

Для модуля - Блог: /blog/0-0-1-$ID$-14-1
Для модуля - Новости сайта: /news/0-0-1-$ID$-15-1
Для модуля - Фото альбом: /photo/1-1-$ID$-13-1
Для модуля - Вопросы ответы: /faq/0-1#$ID$
Для модуля - Доска объявления: /board/0-1-1-$ID$-3

чтобы не вводить вас в заблуждения, ниже отдельно я размещаю html код основного модуля сайта - новости сайта, так как он отличается немного от оригинала:

HTML для 1,2,3,4 примеров

if($RATING$)?>
  <div class="rating_like" id="rating_like$ID$">
  <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});$('#rating_like$ENTRY_ID$').text('+$RATED$+1?>');};}); ">
  <div class="rating_like_r">Like if($RATED$)?>+else?>endif?>$RATED$</div>
  </a>
  </div>
endif?>

или

HTML для 5 примера

if($RATING$)?>
  <div class="rating_like" id="rating_like$ID$">
  <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});$('#rating_like$ENTRY_ID$').text('+$RATED$+1?>');};}); ">
  <div class="rating_like_l">Like</div>
  <div class="rating_like_r">if($RATED$)?>+else?>endif?>$RATED$</div>
  </a>
  </div>
endif?>
Шаг 2 - Установим CSS:

Теперь когда html каркас кнопки Like для uCoz установлен, давайте выберем нужное оформление на css:

кнопка Like 1 для uCoz
CSS-Code 1-Пример


/* Кнопка Like для uCoz №1
------------------------------------------*/
.rating_like {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  color:#fff;
  background:#ACCE77;
  padding: 4px 10px 4px 10px;
  border-radius: 3px;  
}
   
.rating_like a {
  float:left;
  background:#ACCE77 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
  padding: 4px 10px 4px 30px;
  margin: -4px -10px -4px -10px;

  border-radius: 3px;  
   
  color:#fff;
  text-decoration:none;  
}

.rating_like a:hover {
  background:#E96465 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
}

.rating_like_r{
  float:right;
}
кнопка Like 2 для uCoz
CSS-Code 2-Пример


/* Кнопка Like для uCoz №2
------------------------------------------*/
.rating_like {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  color:#fff;
  background:#5C9AD5;
  padding: 4px 10px 4px 10px;
  border-radius: 3px;  
}
   
.rating_like a {
  float:left;
  background:#5C9AD5 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
  padding: 4px 10px 4px 30px;
  margin: -4px -10px -4px -10px;
  border-radius: 3px;  
  color:#fff;
  text-decoration:none;  
}

.rating_like a:hover {
  background:#E96465 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
}

.rating_like_r{
  float:right;
}
кнопка Like 3 для uCoz
CSS-Code 3-Пример


/* Кнопка Like для uCoz №3
------------------------------------------*/
.rating_like {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  color:#fff;
  background:#E96465;
  padding: 4px 10px 4px 10px;
  border-radius: 3px;  
}
   
.rating_like a {
  float:left;
  background:#E96465 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
  padding: 4px 10px 4px 30px;
  margin: -4px -10px -4px -10px;
  border-radius: 3px;  
  color:#fff;
  text-decoration:none;  
}

.rating_like a:hover {
  background:#ACCE77 url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_02.png) no-repeat left top;
}

.rating_like_r{
  float:right;
}
кнопка Like 4 для uCoz
CSS-Code 4-Пример


/* Кнопка Like для uCoz №4
------------------------------------------*/
.rating_like {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  padding: 4px 10px 4px 10px;
  border-radius: 3px;  
}
   
.rating_like a {
  float:left;
  background:url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_01.png) no-repeat left top;
  padding: 2px 10px 4px 30px;
  margin: 0px -10px 0px -10px;
  border-radius: 3px;  
  text-decoration:none;  
}

.rating_like a:hover {
  background:url(http://ucoz-helper.ucoz.com/vid-rey-stats/ico_like_01.png) no-repeat left top;
}

.rating_like_r{
  float:right;
}
кнопка Like 5 для uCoz
CSS-Code 4-Пример

/* Кнопка Like для uCoz №5
------------------------------------------*/
.rating_like {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  padding: 0px 0px 0px 5px;  
}
   
.rating_like a {
  float:left;
  text-decoration:none;  
}

.rating_like_l{
  float:left;
  padding: 2px 0px 2px 0px;
}

.rating_like_r{
  float:left;
  margin: 0px 0px 0px 5px;
  padding: 3px 7px 3px 7px;
  background:#5C9AD5;
  border-radius: 3px;  
  color:#fff;
}

.rating_like a:hover .rating_like_r {
  background:#E96465;
}

На этом всё мы с вами заменили стандартный рейтинг от uCoz, на кнопку Like и не забывайте, что слово Ltke можно заменить на слово Мне нравиться и т.д на этом всё, спасибо за внимание!

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