8 июля 2013 г.

Движение ярлыков при наведении курсором.

Эффект движения ярлыков уже давно используется в моем блоге. Мне нравится) Хоть я и не люблю много анимации, но чуть-чуть и невязчиво... самое ТО)

И уже давно в черновиках лежит пост об этом эффекте. Но он был написан еще тогда, когда я пользовалась старым редактором шаблонов, а потом перешла на новый и мой браузер перестал его понимать)
Но сегодня я все же протестила новый редактор через Хром (гугловский браузер, в нем обычно все гугловское работает хорошо, как родное ;-)), и готова рассказать об эффекте движения ярлыков и вам.)

Эффект и правда интересный, ярлычки начинают двигаться - слегка уезжать вправо, если на них навести курсором. 
Можно проверить на моих менюшках  - сумочное, для детей и т.д. (правый столбец блога).


Как создать меню из ярлыков я писала ЗДЕСЬ.

Чтобы добавить ярлычкам интересный эффект движения, конечно, виджет "Ярлыки" уже должен быть установлен.

Автор кода, который заставляет двигаться ярлычки, мне, увы, неизвестен (в инете встречала только сам код в разных источниках), если вы его знаете, напишите мне, пжл, с удовольствием вставлю ссылку на него!

Как сделать так, чтобы ярлыки двигались при  наведении на них курсором?

1. Заходим в Панель управления - Настроить.
2. Находим закладку Шаблон, нажимаем.
3. Сохраняем то, что уже есть. 

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

Чтобы сделать резервную копию шаблона, жмем кнопку "Резервное копирование и восстановление".  
Кнопочка находится в правом верхнем углу, прямо под аватаркой. 

    Выпадает такое окошечко:
    Нажимаем "Загрузить шаблон полностью" и сохраняем его на жестком диске компьютера (запоминаем где))). 

    Если мы потом решим восстановить шаблон, то процедура будет такой же, только  мы нажмем кнопку "Обзор" и загрузим сохраненный шаблон обратно в блог. 

    4. Идем обратно в Шаблон-Изменить HTML.
    5. Нажимаем Форматировать шаблон (ничего не происходит).
    6. Нажимаем "Ctrl+F" - появляется окошечко поиска, вводим в него </head> и жмем Enter.
    7. Редактор находит </head> и подсвечивает эту строчку.


    8. Сразу перед строчкой </head> вставляем вот такой код (на фото выше он уже вставлен):

    9. Сохраняем шаблон - кнопка Сохранить.

    Проверяем) Обычно работает. 



    17 комментариев :

    1. Лена, спасибо что делишься своими наработками, опытом, может в будущем запланируешь статью про похожие сообщения, заметила что многие пользуются LinkWithin, а он частенько выдает статьи невпопад, совсем не согласующиеся ярлычком в основной статье. Заранее спасибо.

      ОтветитьУдалить
    2. Спасибо большое! Мне очень нравится этот эффект...я иногда играюсь! если несколько раз по ним пробежаться быстренко туда-обратно, то они еще какое-то время так ездят... :D

      ОтветитьУдалить
    3. Лена, спасибо!! Я довольная как слон :) Сделала себе "отъезжалочки" и поигралась уже. Они так забавно волной ездят, когда вверх-вниз водишь)) Поддерживаю Яну в вопросе о похожих сообщениях. Не пойму, в чём премудрость - у многих показываются посты по теме, а у меня тоже всё в кучу. Будем очень благодарны)

      ОтветитьУдалить
    4. Спасибо! Как раз хотела такую "фишку" для своего блога :)
      P.S. И к вопросу о "похожих" сообщениях тоже присоединяюсь :)

      ОтветитьУдалить
    5. Ааааа, Лен, спасибо огромнейшее!!!! Давно хотела себе этот эфект, видела в некоторых блогах, искала по спецблогам, но все безрезультатно. А ответ нашелся в рукодельном блоге!!!! За что тебе огромное спасибо!!!! Код уже вставила, все работает ;)

      ОтветитьУдалить
    6. Лен, вот я и дождалась :)) Увидела у тебя этот эффект и пошла искать в инете, как сделать. Нашла, сделала и решила поделится знанием со всеми. А потом подумала, что это твоя прерогатива, и стала терпеливо ждать. И вот, не промахнулась :)))

      ОтветитьУдалить
    7. Лена, спасибо огромное! Клёвая штука!)))
      А как ты сделала вставку в текст в п.8? Я давно хочу научиться, но никак не могу понять(((((
      Заранее спасибо!

      ОтветитьУдалить
    8. Лена, ух ты......мне давно нравились двигающиеся ярлычки. Спасибо за пост. Сделала, все работает, довольная как слон!!!!!

      ОтветитьУдалить
    9. Классненько! Доступно даже для таких как я, спасибочки!

      ОтветитьУдалить
    10. Лена, спасибо огромное. Класснючий эффект!!! Все получилось и все работает на УРА!

      ОтветитьУдалить
    11. ААААА!!!! Как здорово!!!! Спасибо, Лен большое!)))))))))

      ОтветитьУдалить
    12. Лена, спасибо! Получилось все с первого раза. Теперь и у меня ярлыки плавают. :)

      ОтветитьУдалить
    13. Елена, спасибо за подробную инструкцию :)

      плавают, а еще и отредактировала сами ярлыки - за это Огромное! спасибо :)

      ОтветитьУдалить
    14. Спасибо. заходите кстати на мой блог http://piratelands.blogspot.ru/ там интересно )

      ОтветитьУдалить
    15. Плаааааввваааюююттт!))))))))) Спасибо!

      ОтветитьУдалить
    16. Спасибо большое- все получилось с первого раза, для меня это рекорд!
      Пойду еще что нибудь у вас почитаю-вдруг тоже получится ))))

      ОтветитьУдалить

    Спасибо за Ваш комментарий! ❤️