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

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

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

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

Код можно вставить в шаблон блога Тема - Изменить html, выше тега 
]]></b:skin>.
Либо и установить гаджетом. Дизайн/Добавить гаджет/HTML JavaScript и вставить код в окошко. Но добавляем в начале кода строку: <style type="text/css"> и в конце кода: </style>. 
Должно получится так: 
<style type="text/css">код оформления ярлыков</style> 
Стиль оформления 1
.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

Перед установкой стиля нужно сменить настройки ярлыков. Заходим в Дизайн/Гаджет Ярлыки. Устанавливаем показ ярлыков "В виде облака". Сохраняем изменения.
ярлыки
Выглядят ярлыки скромно - кирпичиками. Цвет можно поменять. Но при наведении курсора цвет меняется на яркий.
Стиль 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;
}
В коде отметила синим ширину боковой полосы.
Оранжевым в коде выделила цвет "кирпичика" при наведении курсора.
Красным - цвет полосы.
Зелёным - цвет кирпичика в спокойном состоянии.

Ваши комментарии:

Комментарии со спамом удаляются.