2012-05-30

Анимированные ссылки

анимированные ссылки
Анимированные ссылки можно вставить в ваш блог 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="http://blogger.com">Blogger</a>
    • С использованием jQuery
      1. Добавьте jQuery плагин, если не добавляли его раньше в свой блог. Для этого вставьте в редактор шаблонов HTML сделующий код перед кодом <head>

      <script src='http://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='http://netoopsblog.blogspot.com'><img src='http://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='http://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 комментария :

Татьяна Ямскова комментирует...

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

Иванова Наталья комментирует...

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML