» »

Цветная палитра Like мне нравится для uCoz


Изначально любого веб мастера, может просто не устраивать системный рейтинг или Like. Тогда цветная палитра, из которой можно выбрать оттенок и скрипт рейтинга. Созданы они на 2 дизайн, и просто сама гамма у них разная, что выведена на стилях, но подобрана, та которую основном устанавливают. Это безусловно, чтоб яркий оттенок был и по своей стилистике подходил под сам ресурс. До этого на сайте был размещен один рейтинг, где полностью он был переделан, а точнее сердечки были заменены на совершенно другие картинка. Что здесь вы уже сами сможете сделать что то оригинальное.

Установка:
Это основной каркас, который состоим из двух кодов, что модно по главному изображению понять.
На страницу материала и комментариев к нему вставляем HTML код для 1,2,3 и 4 примера.
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('+');};}); ">  
  <div class="rating_like_r">Like +$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('+');};}); ">  
  <div class="rating_like_l">Like</div>  
<div class="rating_like_r">+$RATED$</div>  
  </a>  
  </div>  
<?endif?>



В начале скрипта мы видим ссылку, что идет под каждый модуль, и возможно у вас один блог или новости, так здесь нужно просто поменять.





Код
.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://ucozon.ru/_dr/64/20002982.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/20002982.png) no-repeat left top;  
  }  

  .rating_like_r{  
   float:right;  
  }




Код
.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/20002982.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/20002982.png) no-repeat left top;  
  }  

  .rating_like_r{  
   float:right;  
  }




Код
.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/20002982.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/20002982.png) no-repeat left top;  
  }  

  .rating_like_r{  
   float:right;  
  }




Код
.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/22710585.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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/22710585.png no-repeat left top;  
  }  

  .rating_like_r{  
   float:right;  
  }




Код
.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;  
  }


Устанавливаем сам каркас, который идет в 2 скриптах, которые и настроены эти стили, просто установили и посмотрели какой стиль отвечает, последние 2 CSS за 5 номер.

Ориентир, по коду и стилям.

07.05.2016 Просмотров: 497 Комментарий: (17)

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

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

Комментарий: 16
Сопрано
Сопрано 07.05.2016 18:111
0
Нормальные лайки, если переделать, вижу начал делать перелиньковку, так лучше сделать на всем, что подходит, а здесь будет работы много.
tsakonter
tsakonter 07.05.2016 19:442
0
Главное чтоб привлекательные были, а не стояли как гарнитур, и чтоб работали, а так нормально смотрится, но лучше Лайк написать.
Kosten
Kosten 07.05.2016 19:583
0
Но это каждому видней, что он напишет, так как там все прописью в этом плане идет.
Angerfist
Angerfist 07.05.2016 22:114
0
я чот вообще подумал и решил убрать лайки, минимализм сплошной сделать
Kosten
Kosten 08.05.2016 00:095
0
Angerfist, но эти лайки места не занимают много, специально скрин залил реально, сколько места в материале он. А так бы их хорошо можно переделать, но мне больше нравится, когда работают как на hph есть такие.
Tergran
Tergran 08.05.2016 00:176
0
Но согласитесь, подборка то не плохая, и выбор просто большой, это не просто по цвету выбирать можно, но и по дизайн, хотя работают на одной солярке.
Angerfist
Angerfist 08.05.2016 00:377
0
бл как же никто не хочет вникать,траст вообще придирчив,разжуй ему,сначала ошибки орфографические подправь, описание полное...и так всё ...
Angerfist
Angerfist 08.05.2016 00:398
0
я в шоке, всем разжуй код
Kosten
Kosten 08.05.2016 00:4211
0
Нет, тут реально на скоряк написал, времени не было, начинал, думал все правильно, но нужно быстро потом запелить было, но сейчас все довел до разумного.
Kosten
Kosten 08.05.2016 00:409
0
Траст, всегда за здравую критику, все исправил, теперь думаю понятно стало.
Angerfist
Angerfist 08.05.2016 00:4210
0
я понимаю сложное как js сценарии
но я не видел чтоб разжевать просили сценарий скрипта
а уже то что простое вы просите админа вам на блюдечке
Kosten
Kosten 08.05.2016 00:5612
0
Считаю описание должно быть таким, с начало поставил скрипт и посмотрел он работает, и ты знаешь как ставить, и не чего не стоит все это написать. Так основном сейчас и делаю по всем почти скриптам, ставлю проверяю и уже в курсе что написать.

Но не считая шаблонов, сейчас вообще не заливаю, так как они свою роль сыграли еще год назад, как появилась, подгонять под мобильные устройства. Лишний дизайн сейчас без этого не установить.
Kosten
Kosten 08.05.2016 00:5913
0
С этим редактированием, все операторы пропали у кодов.
Kosten
Kosten 08.05.2016 01:0214
0
Все исправил, операторы прописал.
1 2 »
avatar