Эффект плавающих ярлыков



Здравствуйте друзья, гости и постоянные читатели. Сегодня у меня для Вас очередная фишка для блогов, точнее для гаджета Ярлыки. С помощью скрипта ниже придадим плавающую анимацию названий ярлыков. Смотрим на скриншоте

Эффект плавающих ярлыков в блогах блоггер

Живой пример сходите посмотреть в тестовый блог, можно поиграться. Подведите курсор к названиям и понаблюдайте плавающий эффект ярлычков. Чтобы реализовать такой эффект в своих блогах, добавьте гаджет Ярлыки. У кого их много, можно выбрать пользующиеся спросом у читателей. 

Настройка гаджета ярлыки.

Ставьте отметку "выбранные ярлыки", нажмите изменить. Внизу оставьте галку для нужных ярлыков. У меня из 20 выбрано 11. Обязательно нужно отметить показывать список. Для облака никакого эффекта не будет. Сохраняем гаджет в макете блога. Копируем код ниже.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>
    var dur = 400;
    $(document).ready(function() {
        $(&#39;a.linknudge, #Label1 ul li a&#39;).hover(function() {
            $(this).animate({
                paddingLeft: &#39;25px&#39;
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    });
</script>

Идем шаблон изменить шаблон. Обязательно делайте резервную копию. В шаблоне находим закрывающий тэг </head> и выше вставляем скрипт.

Вставка скрипта в шаблон блога выше закрывающего тэга </head>.

Посмотрите в шаблоне скрипт библиотеки jquery. Если библиотека подключена, с кода скрипта аккуратно удалите jquery, выделено голубым.

Обязательно нажмите просмотр, внимательно посмотрите изменения. В родных шаблонах блоггер я их не заметила, а в блогах на сторонних шаблонах шапка съехала вниз. Далее жмем сохранить шаблон.

При тестировании не все шаблоны принимают CSS с точкой. В одних . Label1, в других решетка #Label1. В коде скрипта выделено сиреневым.

Как видим ничего сложного нет в установке скрипта. Но если будут вопросы, пишите в комментариях или форма для связи в меню. Удачи и всем всего доброго.

Посмотрите еще интересные статьи:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/11/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *