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

ярлыки
Привет, друзья. Сегодня опять шпаргалка о том, как изменить дизайн гаджета ярлыки в Блоггер. Чтобы придать более современный и симпатичный вид названию ярлыков. Хочу предложить вам 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


8 комментариев:

  1. Замечательные ярлыки! Мне нравятся с полосой прокрутки, которые стоят в моих блогах. Я брала их, Виктория, из твоего поста.

    ОтветитьУдалить
    Ответы
    1. Ирина их так же можно оформить.

      Удалить
  2. интересно, спасибо

    ОтветитьУдалить
  3. Вика, пропустила у вас много интересного, обязуюсь наверстать.

    ОтветитьУдалить
    Ответы
    1. Будет время, наверстаете.

      Удалить
  4. Виктория, ты же знаешь, что у меня в Записках на колготках новый шаблон. Там интересно оформлены ярлыки. Их не видно, пока не развернешь. Здорово! С прокруткой они тоже не очень видны и занимают мало места. У некоторых в блогах мне не нравится, что ярлыки заполоняют весь сайдбар. И другие гаджеты почти не видны на фоне ярлыков.

    ОтветитьУдалить
    Ответы
    1. Да Ирина, язнаю про твой шаблон. Конечно выбирай что нравится. Я с тобой солидарна меня тожек раздражает простыни из ярлыков.

      Удалить

Пользовательский поиск
Foto Saya
My Photo