Красивое оформление ярлыков в блоге на Blogger (Blogspot)

Если вы еще не знаете как добавить гаджет "ярлыки", создать рубрики из ярлыков, как присвоить сообщению ярлык советую перейти по ссылкам и почитать статьи.

Все рекомендации и варианты применимы только для стандартных шаблонов blogger.

Чтобы изменить дизайн ярлыков , нужно  вначале настроить  гаджет.

Как правильно настроить гаджет "Ярлыки"

Заходим в админку блога > дизайн > гаджет "Ярлыки", нажимаем на карандашик , в случае удаления кнопки быстрого редактирования жмем Изменить.

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

Как добавить код CSS в шаблон блога для оформления ярлыков

Заходим в административную панель инструментов блога, нажимаем вкладку «Тема», делаем бэкап шаблона (обязательно перед каждым изменением в блоге).

Нажимаем «Изменить HTML». В тело шаблона ставим курсор мышки и вызываем окно поиска сочетанием клавиш CTRL+F, в открывшемся поле вводим код ]]></b:skin>, код должен подсветиться, то есть выделится в другой цвет, перед строчкой ставим курсор и нажимаем Enter, в новой строке вставляем код CSS оформления ярлыков, который вам понравился с предложенных мною вариантов.

Этот тег у всех шаблонов находится вверху. Нажимаем «Просмотреть шаблон». Если вы видите результат в своем блоге, жмем «Сохранить шаблон».

Цвет фона, шрифта настраивайте по своему вкусу. Заходим в Панель инструментов > Шаблон > Настроить > Дополнительно. Не бойтесь экспериментировать. Цвет фона стилей (кнопочек) надо менять непосредственно в коде СSS.

Первый вариант оформления ярлыков

При наведении курсора мышки название ярлыка будет принимать вот такое привлекательное положение.

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none;font-size:10px;color:#666;}.label-size:hover { border:1px solid #6BB5FF; text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=’auto expand’); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; }.label-size a:hover { text-decoration: none; }

Второй вариант для оформления облака ярлыков

.label-size {float: left;margin: 0 0 7px 20px;position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 0.75em;font-weight:bold;text-decoration: none;color: #996633;text-shadow: 0px 1px 0px rgba(255,255,255,.4);padding: 0.417em 0.417em 0.417em 0.917em;border-top: 1px solid #d99d38;border-right: 1px solid #d99d38;border-bottom: 1px solid #d99d38;-webkit-border-radius: 0 0.25em 0.25em 0;-moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0;background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);z-index: 1; }

Третий вариант оформления гаджета ярлыки

.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter:nprogid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
z-index: 1;}

 

Еще один красивый способ оформить ярлыки

#Label1 a{ border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none; color:black;white-space: nowrap; font-family: arial,serif;text-transform:capitalize; font-size: 12px;font-weight: bold; position: relative !important;background: #aa00ff; -moz-opacity:0.75; -khtml-opacity:0.75;opacity:0.75; filter:alpha(opacity:75%); float:left;padding: 4px 3px; margin: 0 5px 5px 0; border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; } #Label1 a:hover { -moz-opacity:1; -khtml-opacity:1; opacity:1; background:#A55A27;color:white; -webkit-transition:all ease-in-out .5s; -moz-transition:all ease-in-out .5s; -o-transition:all ease-in-out .5s; transition:all ease-in-out .5s; } #Label1 a:active { background:#B24700;color:#80FFFE; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; -o-transition:all linear .5s;transition:all linear .5s; }