Как сделать анимацию ссылок

Анимированные ссылки можно вставить в ваш блог Blogspot несколькими способами.
Способ 1. Переливающиеся разными цветами ссылки.
Радужная ссылка
Для того, чтобы получить такую анимацию ссылок, нужно в дизайне блога добавить гаджет HTML / JavaScript с кодом

<script src='http://yourjavascript.com/512719721/rainbow-links.js'>
/*
Rainbow Links Script- TAKANASHI Mizuki
For full source code, 100's more DHTML scripts, and TOS,
Visit http://www.dynamicdrive.com
Via http://www.spiceupyourblog.com
*/
</script>

Способ 2. Анимация ссылок с движением, перемещением.

- С использованием CSS Для просмотра примера ниже, обновите страницу.
  
  Для того, чтобы настроить такие ссылки в вашем блоге Blogger, зайдите в редактор шаблонов HTML. С помощью CTRL + F найдите отрезок кода ]]></b:skin> и вставьте перед ним код:
  
  .noopln {
  -moz-transition: all 0.1s ease-in 0s ;
  -webkit-transition: all 0.1s ease-in 0s ;
  -o-transition: all 0.1s ease-in 0s ;
  }
  .noopln:hover {
  margin-left: 12px;
  }
  
  Сохраните изменения.
  Теперь вы можете добавить эффект движения любой ссылке в вашем блоге. Достаточно вписать в код ссылки class="noopln". Ссылка будет иметь вид:
  
  <a class="noopln" href="https://blogger.com">Blogger</a>
- С использованием jQuery
  1. Добавьте jQuery плагин, если не добавляли его раньше в свой блог. Для этого вставьте в редактор шаблонов HTML следующий код перед кодом <head>
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  
  2. Найдите в шаблоне код </head> и добавьте код перед ним:
  
  
  <script type='text/javascript'>
  var speed = 300; // Speed Of Animation
  $(document).ready(function() {
  $('a.noopln,#Label1 ul li a,.Label li').hover(function() {
  $(this).animate({paddingLeft: '13px'}, speed);
  }, function() {$(this).animate({paddingLeft: 0}, speed);
  });
  }); </script><a href='https://netoopsblog.blogspot.com'><img src='https://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End—>
  
  3. Сохраните изменения.
  Теперь для того, чтобы ваша ссылка стала подвижной, нужно добавить к ним класс class="noopln". Если ссылка уже имеет класс, то добавьте noopln после пробела следующим образом:
  
  <a class="anotherclass noopln" href="Ссылка ">Текст ссылки</a>
  
  Таким образом вы сможете оформить, например, блок ссылок на главной странице.

Способ 3. Анимация гаджета Ярлыки. Замечание. Для того, чтобы эффект работал, нужно, чтобы ярлыки были выведены в виде списка, а НЕ облака.

Настраиваем виджет :
1. Найдите в редакторе шаблонов HTML код </head>
2. Вставьте перед ним отрезок кода:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

3. Сохраните шаблон.
Читайте также:

Ссылки внутри страницы
Анимированный скриншот

Добавить комментарий

Татьяна Ямскова 11 июля, 2014 в 6:31 пп

Спасибо! Первый раз установила ваши анимированные переливающиеся ссылки, замечательно работали на нескольких блогах в течении полугода. Затем исчезли, думаю что я что-то добавила в шаблон и этот замечательный гаджет слетел. Долго искала и о счастье - нашла вновь у Вас!!! Всё вновь заработало!

Ответить
Иванова Наталья 14 июля, 2014 в 2:16 пп

Татьяна, я рада, что вам пригодились ссылки с анимацией )

Ответить