Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Стильное облако тегов для Blogger с помощью CSS3

Про облако тегов для системы 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; В целом элемент смотрится весьма неплохо и оригинально.

23.07.19

Категории: Blogger.com (Blogspot).

Теги: , , , , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.