» »

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


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

По дизайну выглядит сам формат строгим но оригинальным и по своему красивым. Так как несколько цветовых оттенок идет, думаю вы без труда найдете себе под ваш портал. Скажу от себя, на многих сайтах видел такие коды Мне нравится и они были прописаны в в файлах в вид материалах и комментариях к нему. Почему я это говорю? Так как на вид материалов они по дизайну мало идут. Надо пользователю прочитать и оценить материал, а тут сразу это кнопка стоит и думаю если ему не лень то он нажмет. А просто если ее ставить где то, то она будит явно не по теме, так как нужно устанавливать рядом с материалом или статьей чтоб можно было оценить.
И так приступаем к установке:
Находим у себя в модулях это кусок кода:
Код
<div style="float:right"></div>

И убираем его чтоб вместо его прописать этот код мне нравиться.
С начало для раздела новости (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?-->

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



Код
/* 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://zornet.ru/CSS-ZORNET/ZR/ugol_white.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  

  #rating_l:hover {  
  background: #fff url(http://zornet.ru/CSS-ZORNET/ZR/ugol_white.png) no-repeat right;  
  }  

  #rating_p {  
  float:right;  
  padding: 3px 5px 3px 5px;  
  background:#e3e3e3;  
  }



Код
/* 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://zornet.ru/CSS-ZORNET/ZR/ugol_black.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  

  #rating_l:hover {  
  background: #5d5d5d url(http://zornet.ru/CSS-ZORNET/ZR/ugol_black.png) no-repeat right;  
  }  

  #rating_p {  
  float:right;  
  padding: 3px 5px 3px 5px;  
  background:#6e6e6e;  
  }



Код
/* 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://zornet.ru/CSS-ZORNET/ZR/ugol_blue.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  

  #rating_l:hover {  
  background: #e5f5ff url(http://zornet.ru/CSS-ZORNET/ZR/ugol_blue.png) no-repeat right;  
  }  

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

На этом все, думаю эти кнопки украсят ваш сайт и будут работать по своему делу.
17.08.2013 Просмотров: 1009 Комментарий: (0)

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

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

Комментарий: 0
avatar