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.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Blogger - улучшаем вид ярлыков при помощи CSS3
Blogger - улучшаем вид ярлыков при помощи CSS3
Blogger - flogspot улучшаем вид ярлыков при помощи CSS3. Установить, добавить в блог красивые и стильные ярлыки.
https://1.bp.blogspot.com/-thxMrA2ziBA/VcNw0pEbXiI/AAAAAAAAfB4/oCnlS2wwJFo/s1600/%25D1%2581%25D1%2582%25D0%25B8%25D0%25BB%25D1%258C%25D0%25BD%25D1%258B%25D0%25B5%2B%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA%25D0%25B8%2Bblogger.jpg
https://1.bp.blogspot.com/-thxMrA2ziBA/VcNw0pEbXiI/AAAAAAAAfB4/oCnlS2wwJFo/s72-c/%25D1%2581%25D1%2582%25D0%25B8%25D0%25BB%25D1%258C%25D0%25BD%25D1%258B%25D0%25B5%2B%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA%25D0%25B8%2Bblogger.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-css3-stilnuj-vid-dlya--yarlukov.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-css3-stilnuj-vid-dlya--yarlukov.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy