Красивое оформление ярлыков для 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>

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

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

==========================
Понравилась статья? Поделитесь с друзьями