Google+ Followers

Будь в курсе событий!

19.02.2013

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

Leave a Comment
Про облако тегов для системы Blogspot было сказано немало, но тем, кто лишь недавно присоединился к данному блогохостингу, я кое-что повторю. Если "глубоко копнуть", то следует заменить, что изначально виджета для тегов как такового в системе не было, приходилось довольствоваться специальным хаком. Процесс внедрения облака тегов был не таким уж и простым, хотя результат получался вполне достойный.
К счастью в 2009 ситуация изменилась к лучшему, и появился специальный виджет облака тегов, с помощью которого оно ставилось за несколько кликов. Вы могли не только выбирать какие именно теги выводить, но и с помощью CSS подправить стили отображения ссылок. Собственно об этом сегодня и будет мой рассказ (спасибо авторам этой статьи). После прохождения всех этапов у вас получится такой стильный элемент для сайта.
Установку можно разделить на 2 этапа: добавление виджета облака тегов в макет блога, второй - правка в шаблоне стилей для него.
1. Заходим в админку Blogger и выбираем раздел "Дизайн". Создаем новый гаджет/виджет типа "Ярлыки". В нем указываем нужные вам настройки для облака тегов.
2. Теперь открываем раздел "Шаблон", кликаем по кнопке "Изменить HTML". В окне с кодом макета находим ]]>. Перед этим местом добавляем следующие строки:

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


0 коммент. :

© 2012-2017 Cash's from program