Сегодня 25 июля, пятница

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Блог для блогов - создание блога на blogspot / Запись в блоге

	Блог для блогов - создание блога на blogspot Голосов: 1 Адрес блога: http://bdblogov.blogspot.com/ Добавлен: 2013-06-02 03:52:18 блограйдером Olga28

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

2014-02-01 18:49:00 (читать в оригинале)

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

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

Как вставить в блог blogspot гаджет Ярлыки с использование CSS стилей

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

.label-size{

margin:0;

padding:0;

position:relative;

}

.label-size a{

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;

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

-moz-border-radius-topright:4px;

-webkit-border-top-right-radius:4px;

border-top-right-radius:4px;

}

.label-size a:before{

content:"";

float:left;

position:absolute;

top:0;

left:-12px;

width:0;

height:0;

border-color:transparent #0a9e08 transparent transparent;

border-style:solid;

border-width:12px 12px 12px 0;

}

.label-size a:after{

content:"";

position:absolute;

top:10px;

left: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 a:hover{

background:#642A29;font-family: Tahoma, Arial, Helvetica, Sans-Serif;

text-decoration: none;

color: #FFFFFF;

}

.label-size a:hover:before{

border-color:transparent #642A29 transparent transparent;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. У меня на сегодня все. Оставляйте отзывы, задавайте вопросы. Всего доброго.

Тэги: гаджеты

Блограйдеров
14516

Блогов
219965
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Программисты»

Взлеты Топ 5


+129	132	Bagdad
+113	131	QoSyS
+108	135	{dimaka}
+97	143	Yaroslav Starovirets
+77	137	ProgBook - книги и учебники по программированию

Падения Топ 5


-2	6	Robin_Bad
-9	3	livenebo
-11	43	Илья
-15	4	V_exeR
-16	2	Блог интернет-разработчика

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.