Стильное оформление ярлыков на Блоггер

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

На сайте можно посмотреть другие стили оформления:

Оформляем ярлыки на Blogspot

Красивые ярлыки на Блоггер

11 кодов оформления ярлыков на blogger

Стиль оформления 1

Код можно вставить в шаблон блога Тема - Изменить html, выше тега

]]></b:skin>.

Либо и установить гаджетом. Дизайн/Добавить гаджет/HTML JavaScript и вставить код в окошко. Но добавляем в начале кода строку: <style type="text/css"> и в конце кода: </style>.

Должно получится так:

.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }

.Label a:hover{
color:#000 !important;
background:#ff0; }

Цвет ярлыков - выделила в коде красным.

Цвет ярлыков при наведении курсора - выделила синим.

Стиль оформления 2

Перед установкой стиля нужно сменить настройки ярлыков. Заходим в Дизайн/Гаджет Ярлыки. Устанавливаем показ ярлыков "В виде облака". Сохраняем изменения.

Выглядят ярлыки скромно - кирпичиками. Цвет можно поменять. Но при наведении курсора цвет меняется на яркий.

.Label li {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
color: #6c6874;
margin: 0 1px 1px 0;
padding: 0;
text-decoration: none;
}
.label-size a {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 0 none;
border-image: none;
border-left: 0 none;
border-top: 0 none;
color: #666666;
float: left;
font-size: 12px;
margin: 0 5px 5px 0;
padding: 10px;
text-decoration: none;
}
.label-size a:hover {
background-color: #e52b50;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-right: 7px solid #360101;
}

В коде отметила синим ширину боковой полосы.

Оранжевым в коде выделила цвет "кирпичика" при наведении курсора.

Красным - цвет полосы.

Зелёным - цвет кирпичика в спокойном состоянии.