
Анимированные ссылки можно вставить в ваш блог 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() {
$('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>
Таким образом вы сможете оформить, например, блок ссылок на главной странице.
- С использованием CSS Для просмотра примера ниже, обновите страницу.
Способ 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. Сохраните шаблон.
Читайте также:
- Ссылки внутри страницы
- Анимированный скриншот
Спасибо! Первый раз установила ваши анимированные переливающиеся ссылки, замечательно работали на нескольких блогах в течении полугода. Затем исчезли, думаю что я что-то добавила в шаблон и этот замечательный гаджет слетел. Долго искала и о счастье - нашла вновь у Вас!!! Всё вновь заработало!
Татьяна, я рада, что вам пригодились ссылки с анимацией )