Стильный гаджет Ярлыки для блогов Blogspot



Как изменить гаджет Ярлыки в стиле CSS


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

Как вставить в блог блогов гаджет Ярлыки с использование CSS стилей
Для начала нам надо перейти в дизайн - добавить гаджет - Ярлыки. В настройках отметьте Все Ярлыки-в виде облака, а не списка, сохраните. Установите в нужном для Вас месте макета блога.

Далее скопируйте ниже стиль CSS для гаджета. Теперь переходим в шаблон - изменить шаблон. Предварительно делайте резервную копию шаблона.

После открывающего тэга <head> ищем строку <b:skin> ... </ b:skin>, нажимаем На стрелку слева, спускаемся Вниз, находим ]]> <b:skin> И Выше вставляем скопированный rод. Здесь же прямо в шаблоне можно изменить настройки. Нажимаем-просмотр шаблона, если Все нормально Сохраняем.

. Label size {
 Margin : 0 ;
 padding : 0 ;
 position: relative;
 }
. Label size {
 float: left ;
 height : 24px;
 line-height : 24px;
 position: relative;
 Font size : 12px;
 margin-bottom : 9px;
 margin-left : 20px;
 padding : 0 10px 0 12px;
 background : # 054f04;
 color : # FFF;
 text-decoration : none;
 Border-radius -moz -BottomRight: 4px;
 -WebKit- border-bottom- right- radius : 4px;
 border-bottom- right- radius : 4px;
 Border-radius -moz -TopRight: 4px;
 -WebKit- border-top- right- radius : 4px;
 border-top- right- radius : 4px;
 }
. Label size : to {
 Content : "";
 float: left ;
 position: absolute ;
 top: 0 ;
 left :-12px;
 width: 0 ;
 height : 0 ;
 border color: transparent transparent transparent # 0a9e08 ;
 border -style: solid ;
 border-width : 12px 12px 12px 0 ;
 }
. Label size : after {
 Content : "";
 position: absolute ;
 top : 10px;
 From left to right : 0 ;
 float: left ;
 width : 4px;
 height : 4px;
 MOZ - border-radius : 2px;
 -WebKit- border-radius : 2px;
 border radius : 2px;
 background : # FFF;
 - Moz- box - shadow :-1px-1px 2px # 000000 ;
 -WebKit- box - shadow :-1px-1px 2px # 000000 ;
 box - shadow :-1px-1px 2px # 000000 ;
 }
. Label size : hover {
 background : # 642A29; font-family : Tahoma, Arial, Helvetica, sans-serif ;
 text-decoration : none;
 color : # FFFFFF;
 }
. Label size : hover : before {
 border color: transparent transparent transparent # 642A29 ; font-family : Tahoma, Arial, Helvetica, sans-serif ;
 text-decoration : none;

 color : # FFFFFF;}




Настройки:  height : 24px; -высота изображения; Font size : 12px; -размер шрифта;  background : # 054f04;-цвет фона изображения;  color : # FFF;-цвет текста (название ярлыков);   # 0a9e08 -цвет стрелочки; background:#FFF;-цвет точки на стрелке; 

Это основные настройки гаджета Ярлыки с использованием CSS стилей. У меня на сегодня все. Оставляйте отзывы, задавайте вопросы. Всего доброго.


Автор статьи ✎ Olga Protasova Выпуск ✹ 2/01/2014 Ярлыки ►


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

0 коммент. :

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


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

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

Имя

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

Сообщение *