Как изменить дизайн гаджета ярлыки

Привет, друзья. Сегодня опять шпаргалка о том, как изменить дизайн гаджета ярлыки в Блоггер. Чтобы придать более современный и симпатичный вид названию ярлыков. Хочу предложить вам 2 варианта их оформления.

При наведении курсора эффект подчёркивания ссылки и смена фона. В спокойном состоянии задан полупрозрачный фон. Посмотрите пример на этом тестовом блоге в самом низу сайдбара.

Сразу оговорюсь, что они подходят только если сами ярлыки у вас отображены в виде облака. При выборе вывода ярлыков списком эти коды не работают.

Если вы выбрали один из вариантов, скопируйте предложенный код. Затем идём во вкладку тема - изменить HTML и находим строку ]]></b:skin>. Сразу над ней устанавливаем этот код.

Вариант 1. Вот так это будет выглядеть.

Код.

.label-size-1,{
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#FFC1C1;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Вариант 2.

Код.

.label-size-2, {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:20px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

В кодах можно поиграться со всеми значениями background: и color:#fff, чтобы цвет соответствовал вашему дизайну. Воспользуйтесь этой таблицей.

 Во втором варианте добавлено лишь закругление углов, где так же можно изменить border-radius:30px; на большее или меньшее.
filter:alpha(100);
opacity:10 задают фильтр и полупрозрачность фона при спокойном состоянии. При желании можно убрать.

Вот все настройки. После добавления кода в шаблон, не забудьте сохранить внесённые изменения.

Всем спасибо и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email