Анимированные ссылки можно вставить в ваш блог Blogspot несколькими способами.
Способ 1. Переливающиеся разными цветами ссылки.
Радужная ссылкаДля того, чтобы получить такую анимированную ссылку(https://www.mycrib.ru/2010/07/html_2182.html), нужно в дизайне блога(http://www.mycrib.ru/2011/10/blogger.html) добавить гаджет 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 Для просмотра примера ниже, обновите страницу.
Зайдите в редактор шаблонов HTML. Найдите отрезок кода ]]></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://westinna.blogspot.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-->
3. Сохраните изменения.
<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='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbbGMbAQQ1ENF1mr3p4_aDBOrc1ejOdIFR4iVPQsyDDMYkG1JbM4O_9Cp08aU52MImkZVKKekSNKK2M-PnVkKMKMiCtNELaYTRcckdwJb6FfYUcpuX_xI5oA8nLoxWHw2gYNLX9Ic8Y4Y/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End—>
Теперь для того, чтобы ваша ссылка стала подвижной , нужно добавить к ним класс 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'>3. Сохраните шаблон.
</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-->
Читайте также:
- Ссылки внутри страницы: http://www.mycrib.ru/2011/10/blog-post.html
- Анимированный скриншот: http://www.mycrib.ru/2011/10/blog-post_27.html
0 коммент.:
Отправить комментарий