Главная » Для UCOZ » 2016 » Август » 26 » Оформление ссылок в информере "Облако тегов"

Разное

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



Теги: Информеры, облако тегов


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

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

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

Код

$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">  


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

Новые пользователи

Хостинг от uCoz