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

13 сентября 2015 г.

Красивое оформление ярлыков для Blogspot.

В этом уроке мы рассмотрим как можно красиво оформить раздел ЯРЛЫКИ.
Мне такой эффект понравился, во всяком случае смотрится на много красивее, чем родной гаджет ЯРЛЫКИ. Вот так выглядят  РАЗДЕЛЫ БЛОГА у меня. Если навести курсор на  раздел, то ярлычок будет двигаться и менять цвет.
 Цвет ярлычков можно менять под свой дизайн.

Если вам понравился такой вариант гаджета ЯРЛЫКИ, тогда приступим к установке. Наверняка у вас уже установлен такой гаджет.
Для новичков скажу, как это сделать.
*****
 Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
и из предложенных вариантов выбираем -ярлыки.
  Добавленный гаджет перемещайте в нужное место и нажмите на ПРОСМОТР.
Если вас всё устраивает, жмите на СОХРАНИТЬ РАСПОЛОЖЕНИЕ.
*****


 Сразу заострю ваше внимание, что предложенный код,
 работает если выбран стиль ОБЛАКО.
 При варианте СПИСОК этот код не подходит.
 
 КОПИРУЕМ ЭТОТ КОД
 В коде меняйте цветовые значения на свои, они  выделены  разным цветом.
Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.

.label-size a { margin:0 4px 6px 0; padding: 5px; text-transform: uppercase; border: solid 1px #3E496B; box-shadow: 1px 1px 2px #333 inset; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#990000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #0F1650; } .label-size a:hover { border:1px solid #DCE5F4; text-decoration: none; -moz-transition: all 0.7s ease-out;  -moz-transform: rotate(7deg); color: #333; background-color: #3957A1; box-shadow: 1px 1px 2px #333; }

После всех изменений заходим во вкладку шаблон-изменить HTML. и перед строкой ]]></b:skin> вставляем скопированный код.



КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ
Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F
Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter
таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.
В данном случае у нас это  ]]></b:skin>

После установки кода, непосредственно в шаблон, обязательно нажмите просмотреть шаблон и убедитесь, что всё получилось. Не забудьте сохранить. Остаётся только зайти посмотреть блог и порадоваться новому дизайну гаджета ярлыки.


Всегда перед тем как что-то менять в шаблоне не забывайте
делать резервное копирование!
==========================
Понравилась статья? Поделитесь с друзьями

Related Posts Plugin for WordPress, Blogger...