Blogger - улучшаем вид ярлыков при помощи CSS3


Здравствуйте уважаемые блогеры и вебмастера. Сегодня мы подготовили очередной урок по улучшению сайта - блога на платформе blogger. Многие из нас знают, что собой являют ярлыки, если же нет, в таком случае вы можете ознакомиться с ними более подробней на моем канале youtube, где я рассказываю, как создать сайт - блог на платформе блогер. Итак посмотрели узнали, что же такое ярлыки и для чего они нужны? Отлично движемся дальше, как вы знаете работу сайта - блога обеспечивает шаблон написанный при помощи кодов HTML/Javascript и CSS так вот в стандартном шаблоне наши ярлыки выглядят стандартно, это с виду обычная ссылка, тогда, как в веб-дизайнерских работах они отображаются по разному, какой стиль им зададут так они и будут выглядеть. Большинство старается задать им кнопочный вид где цвет меняется при наведении курсора мыши. В общем вы можете подобрать себе шаблон для blogger по своему вкусу, где уже все готово и настроено, или же понемногу самим доводит его до идеального состояния. Итак мы знаем, что ярлыки делят наши посты на категории и знаем, как их добавлять, теперь осталось узнать, как сделать их более стильными так, чтоб радовали глаз посетителя нашего сайта - блога. Для этого нужно перейти в раздел Шаблон - Изменить HTML находим код ]]></b:skin> и перед ним вставляем следующий код:
/*--- MBL Custom Label Cloud With CSS3 --- */
.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;
}
Сохраняем шаблон и радуемся своим новым стильным ярлыкам. Ну, а мы продолжаем, сейчас мы узнаем насколько хорошо вы выучили раздел ярлыки. Итак ярлыки могут отображаться списком и ... правильно облаком. Как вы уже поняли первый вариант был для отображения ярлыков списком, если выбрать вариант облако они приобретут свой стандартный вид по-этому сейчас мы зададим несколько стильных вариантов для облака. Для этого все перед тем же кодом ]]></b:skin> вставляем следующий код:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
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
}
Сохраняем шаблон смотрим, что получилось. 
И для второго варианта (прежде чем его добавить уберите первый вариант) добавляем:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
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
}
Первый вариант добавляет зеленые кнопки, второй вариант красные кнопки. И в настройках ярлыка можете поставить галочку напротив предложения "Показывать количество сообщений для каждого ярлыка". На этом мы завершаем наш очередной урок по улучшению шаблона blogger.

Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Blogger - улучшаем вид ярлыков при помощи CSS3
4/ 5
Oleh