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

Обновлено: 5 января 2020Опубликовано
анимация ссылок
Анимированные ссылки можно вставить в ваш блог 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> и добавьте код перед ним:

      <!--Netoops Link Nudge Start-->
      <script type='text/javascript'>
      var speed = 300; // Speed Of Animation
      $(document).ready(function() {
      $(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
      $(this).animate({paddingLeft: &#39;13px&#39;}, 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. Вставьте перед ним отрезок кода:

<!--Animated Label Links For Blogger http://www.spiceupyourblog.com--><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><!--End Animated Label Links For Blogger http://www.spiceupyourblog.com-->

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

Опубликовано Иванова Наталья

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

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

    Ответить

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

Ваш адрес email не будет опубликован.