Главная » 2012 » Март » 18 » Особый вид ссылок (Скрипты для ucoz)
18.03.2012, 22:13

Особый вид ссылок




Скрипт заменяет обычный вид ссылок на красивый и информативный. На данную идею меня натолкнул всеми любимый ВК.

Установка:

1. В css ставим это:

Code

.wrapL {-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background: rgba(0,0,0,0.7);padding:5px;margin:5 5 5 0px;height:80px;width:250px;color:#ccc;}  
.wrapL a {color:#fff;font-weight:bold;text-decoration:none;}  
.wrapL img {-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;float:left;margin-right:5px;}


2. На страницы, где будут "красоваться" ссылки перед закрывающим тегом </body>:

Code

   
  <script type="text/javascript">  
  var forL = $('.forLink a');  
  $.each(forL, function() {  
  $(this).wrap('<div class="wrapL">');  
  $(this).before('<img src="http://mini.s-shot.ru/80x80/80/png/?' + $(this).attr('href') + '">')  
  $(this).after('<br>' + $(this).attr('href') + '<br>' + $(this).attr('title'));  
  });  
  </script>


3. Ссылки преобразуются только внутри элементов с классом .forLink. Оберните например $MESSAGE$ в div:

Code

<div class="forLink">$MESSAGE$</div>


Установка вида в стиле ВКонтакте

1. В css ставим это:
Code

.wrapL {padding:5 5 5 0px;margin:5 5 5 0px;height:90px;color:#777;}  
.wrapL a {color:#2B587A;text-decoration:none;}  
.wrapL a:last-of-type {font-weight:bold;}  
.wrapL img {margin-right:5px;}  
.wrapL img:last-of-type {border-left:2px solid #C3D1E0;float:left;padding-left:5px;margin-right:5px;}


2. На страницы, где будут "красоваться" ссылки перед закрывающим тегом </body>:

Code
<script type="text/javascript">  
  var forL = $('.forLink a');  
  $.each(forL, function() {  
  $(this).wrap('<div class="wrapL">');  
  $(this).before('<img src="http://s1.ipicture.ru/uploads/20120318/zDncHCqp.png">Ссылка ' + '<a href="' + $(this).attr('href') + '">' + $(this).attr('href') + '</a><br><img src="http://mini.s-shot.ru/80x80/80/png/?' + $(this).attr('href') + '">')  
  $(this).after('<br>' + '<span style="color:#000">' + $(this).attr('title') + '</span>');  
  });  
  </script>


3. Ссылки преобразуются только внутри элементов с классом .forLink. Оберните например $MESSAGE$ в div:

Code
<div class="forLink">$MESSAGE$</div>


Если у ссылки есть title, то он будет выводиться в табличке, как и всё остальное.
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://usite.su/
Категория: Скрипты uCoz | Просмотров: 1538 | Добавил: sold93 | Рейтинг: 4.5/2 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]