Стильное облако тегов для Blogger с помощью CSS3
23.07.19
Про облако тегов для системы Blogspot было сказано немало, но тем, кто лишь недавно присоединился к данному блогохостингу, я кое-что повторю. Если «глубоко копнуть», то следует заменить, что изначально виджета для тегов как такового в системе не было, приходилось довольствоваться специальным хаком. Процесс внедрения облака тегов был не таким уж и простым, хотя результат получался вполне достойный.
К счастью в 2009 ситуация изменилась к лучшему, и появился специальный виджет облака тегов, с помощью которого оно ставилось за несколько кликов. Вы могли не только выбирать какие именно теги выводить, но и с помощью CSS подправить стили отображения ссылок. Собственно об этом сегодня и будет мой рассказ (спасибо авторам этой статьи). После прохождения всех этапов у вас получится такой стильный элемент для сайта.
Установку можно разделить на 2 этапа: добавление виджета облака тегов в макет блога, второй — правка в шаблоне стилей для него.
1. Заходим в админку Blogger и выбираем раздел «Дизайн«. Создаем новый гаджет/виджет типа «Ярлыки». В нем указываем нужные вам настройки для облака тегов.
2. Теперь открываем раздел «Шаблон«, кликаем по кнопке «Изменить HTML». В окне с кодом макета находим ]]></b:skin>. Перед этим местом добавляем следующие строки:
/*-----Custom Labels widget by www.bloggertrix.com----*/
#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color:#000000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 5px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:4px 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{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}
Сохраняем шаблон. Это все стили оформления CSS3 для вашего облака тегов. Да, возможно, он будет не совсем хорошо отображаться в мобильных шаблонах, но на обычных компьютерах вполне нормально. Кстати, если вы разбираетесь в CSS, то можете изменить данный код под себя. Цвета здесь задаются с помощью директив color (для шрифта) и background (для фона). Я бы добавил еще центрирование облака через text-align: center; В целом элемент смотрится весьма неплохо и оригинально.