Гостевой вход

Вы не залогинились
21:18

Оформление ссылок в информере "Облако тегов"

Категория: Разное

Метки: Информеры, облако тегов
Ну вот и до ссылок добрались) казалось бы, а чего тут можно придумать, ссылки они ссылки и есть. Однако же нет, можно. И в этом материале вы увидите, как можно видоизменить обычные ссылки в информере "Облако тегов". Этот информер я взял всего лишь в качестве примера, потому как то решение, которое мы с вами рассмотрим, применимо к любой ссылке (например, для ссылок меню и т.д.)
Мы сделаем их более выразительными, добавим иконки для каждой ссылки и плавное затухание при наведении/убирании курсора мыши.

Посмотрите демо-пример

Как создавать стандартными средствами системы информер "Облако тегов", я в этой статье рассказывать не буду, думаю, с этой задачей справится любой.
Достаточно будет сказать, что после создания этого информера у нас появится его код, что-то типа такого:

Код

$MYINF_1$  


естественно, вместо цифры 1 у вас может быть своя цифра, всё зависит от того, сколько вами уже было создано информеров до этого.

Не суть. Смысл в том,чтобы этот код информера заключить в блок:

Код

<div id="categories">  
<ul><li>$MYINF_1$</li></ul>  
</div>  


после чего прописать в Таблице стилей (CSS) стили оформления для тегов:

Код

#categories ul {padding:5px;overflow:hidden;}  
#categories ul li {list-style-type: none; /* Убираем маркеры */}  
#categories ul li a{background:#393939;  
padding:4px 8px;  
margin:1px 1px 0 0;  
float:left;  
color:#fff!important;  
text-decoration:none;  
transition:all 0.5s ease 0s;  
-moz-transition:all 0.5s ease 0s;  
-webkit-transition:all 0.5s ease 0s;  
-o-transition:all 0.5s ease 0s;  
}  
#categories ul li a:hover {background:#45c0ff;color:#fff!important;}  


в принципе всё готово, но если вам еще хочется, чтобы для каждой ссылки была дополнительно иконка перед ней, то добавьте здесь же еще строку:

Код

#categories ul li a:before {content: "\f02b";font-family: FontAwesome;margin-right:2px;}  


а в шапку сайта, в секцию HEAD, добавьте ссылку:

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  


На этом всё. Вы получили новое оформление ссылок в информере "Облако тегов".

Просмотров: 309 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    Облако тегов с переключателем вида и фильтром по алфавиту

    Итак, представляю вам новый вариант облака тегов для сайтов uCoz. В чём его особенность? - возможность переключения между стандартным видом облака тегов и списком в один клик - возможность фильтрации тегов по алфавиту в обе стороны - сочетание двух первых опций.

    Оформляем теги в информере облака

    Сегодня еще один вариант для оформления тегов в информере облака тегов для uCoz. Всё оформление на чистом CSS, без использования изображений. Установка очень простая и понятная.

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: