Сайт дня (как попасть): Есть вопросы? У нас есть ответы! Портал по нахождению ответов для вебмастеров.
Дорогие друзья, сегодня я расскажу о том, как сделать облако категорий. Эта схема подходит для любого сайта на любом движке (либо сайта из статических HTML страниц). Пример такого облака категорий вы можете посмотреть в оранжевой боковой колонке на shakin.ru. Вы также можете почитать другие материалы - Как добавить кнопки социальных сервисов на свой блог и Как добавить Вконтакте на свой сайт.
Источник фото: Dazeen
Облако категорий смотрится необычно, занимает меньше места и выглядит привлекательнее, чем обычный список категорий. Плюс можно выделить большим шрифтом те категории, которые вы считаете наиболее важными.
Как-то мне пришло вдохновение и я заменил скучный список категорий красивым облаком. Меня часто спрашивают, как это реализовано, с помощью какого плагина. Мой ответ - красоту нужно создавать вручную, она не поддается автоматизации. Все сделано просто.
Для реализации красивого облака категорий достаточно минимальных познаний в HTML. Вот какое облако получится в результате:
Сначала подсчитаем, сколько у нас категорий. На shakin.ru их 19. Я решил расположить их в 9 строк.
Я решил разместить облако категорий поближе к контенту, на оранжевой боковой колонке. Попробовал разные цвета и пришел к выводу, что оптимально подходит следующая схема - верхняя строка должна быть белой, а нижняя - темно-серой. Остальные должны создавать эффект градиента (плавного перехода от белого к темно-серому).
Размер шрифта должен постепенно уменьшаться от верхней строки к нижней. Вы можете попробовать мою схему или поэкспериментировать с цветами на свой вкус.
Я люблю простые решения, поэтому не стал выносить стилевые оформления в файл стилей CSS, а оформил все прямо в HTML коде. Можно оформить облако категорий разными вариантами, меня полностью устраивает приведенная ниже схема.
Итак, приступим. Для начала найдем таблицу с HTML цветами, вот она. Таблица с переходами от белого к черному (Shades of Gray) находится в середине указанной страницы:
Теперь скопируйте адреса категорий на вашем сайте в отдельный текстовый файл. Для удобства работы и подсветки кода лучше работать не в обычном блокноте, а в каком-нибудь продвинутом текстовом редакторе, например, в Notepad++.
Делаем первую категорию ссылкой:
<a href="https://shakin.ru/category/seo">Продвижение сайтов</a>
К ссылкам я дописал атрибут title, чтобы при наведении на ссылку всплывала подсказка. В него можете поместить название категории или пояснительный текст:
С атрибутом title код ссылки будет таким:
<a href="https://shakin.ru/category/seo" title="Продвижение сайтов">Продвижение сайтов</a>
Для первой строки (которая будет самой светлой) я выбрал белый цвет #FFFFFF и размер шрифта в 18 пикселей:
Для самой темной девятой строки я выбрал цвет #282828 и размер шрифта в 10 пикселей:
Для остальных строк подберем цвета в промежутке между белым #FFFFFF и темно-серым #282828. Вторую и третью строки я решил сделать одного цвета. Я попробовал много разных комбинаций цветов и в итоге пришел к следующей схеме (указана строка и цвет для нее):
Добавим цвет и размер шрифта для первой строки:
<!--Первая строка--> <a href="https://shakin.ru/category/seo" title="Продвижение сайтов" style="font-size: 18px; color: #FFF;">Продвижение сайтов</a>, <!--Конец первой строки-->
Запятую в первой строке я оформлять цветом не стал, так как она и так белая. Запятые же в других строках оформляем цветом. На примере запятой второй строки код будет таким:
<span style="font-size: 18px; color: #F0F0F0;">,</span>
Общий код второй строки получится таким:
🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Если интересует, можете купить на его сайте seoshaolin.com. Для своих читателей делаю хорошую скидку по промокоду "блог". Для получения скидки пишите мне на globatorseo@gmail.com с темой "Курс" или в Telegram @mikeshakin.Приглашаю вас подписаться на мои каналы в Telegram:
@shakinru - продвижение в рунете.
@burzhunet - англоязычное SEO.
<!--Вторая строка--> <a href="https://shakin.ru/category/wordpress" title="Wordpress" style="font-size: 18px; color: #f0f0f0">Wordpress</a><span style="font-size: 18px; color: #F0F0F0;">,</span> <a href="https://shakin.ru/category/site-show" title="Сайт-шоу" style="font-size: 18px; color: #f0f0f0">Сайт-шоу</a><span style="font-size: 18px; color: #F0F0F0;">,</span> <!--Конец второй строки-->
Остальные строки оформляются по аналогии. Приведу итоговый код облака категорий на shakin.ru:
<h2>Облако категорий</h2> <p align="center"> <!--Первая строка--> <a href="https://shakin.ru/category/seo" title="Продвижение сайтов" style="font-size: 18px; color: #ffffff">Продвижение сайтов</a>, <!--Конец первой строки--> <!--Вторая строка--> <a href="https://shakin.ru/category/wordpress" title="Wordpress" style="font-size: 18px; color: #f0f0f0">Wordpress</a>, <a href="https://shakin.ru/category/site-show" title="Сайт-шоу" style="font-size: 18px; color: #f0f0f0">Сайт-шоу</a><span style="font-size: 18px; color: #F0F0F0;">,</span> <!--Конец второй строки--> <!--Третья строка--> <a href="https://shakin.ru/category/interview" title="Интервью с популярными блоггерами и интересными людьми" style="font-size: 16px; color: #f0f0f0">Интервью</a><span style="font-size: 16px; color: #f0f0f0">,</span> <a href="https://shakin.ru/category/webdesign" title="Веб-дизайн" style="font-size: 16px; color: #f0f0f0">Веб-дизайн</a><span style="font-size: 16px; color: #f0f0f0">,</span> <!--Конец третьей строки--> <!--Четвертая строка--> <a href="https://shakin.ru/category/blog-show" title="Обзоры интересных блогов" style="font-size: 16px; color: #e0e0e0">Блог-шоу</a><span style="font-size: 16px; color: #e0e0e0">,</span> <a href="https://shakin.ru/category/seo-answers" title="Ответы на вопросы по продвижению сайтов" style="font-size: 16px; color: #e0e0e0">SEO ответы</a><span style="font-size: 16px; color: #e0e0e0">,</span> <!--Конец четвертой строки--> <!--Пятая строка--> <a href="https://shakin.ru/category/adventures" title="Приключения" style="font-size: 14px; color: #c8c8c8">Приключения</a><span style="font-size: 14px; color: #c8c8c8">,</span> <a href="https://shakin.ru/category/google" title="Поисковая система Google" style="font-size: 14px; color: #c8c8c8">Google</a><span style="font-size: 14px; color: #c8c8c8">,</span> <a href="https://shakin.ru/category/css" title="CSS" style="font-size: 14px; color: #c8c8c8">CSS</a><span style="font-size: 14px; color: #c8c8c8">,</span> <!--Конец пятой строки--> <!--Шестая строка--> <a href="https://shakin.ru/category/english" title="SEO and webdesign in English" style="font-size: 14px; color: #888888">English</a><span style="font-size: 14px; color: #888888">,</span> <a href="https://shakin.ru/category/firefox" title="Firefox" style="font-size: 14px; color: #888888">Firefox</a><span style="font-size: 14px; color: #888888">,</span> <a href="https://shakin.ru/category/web-20" title="Web 2.0" style="font-size: 14px; color: #888888">Web 2.0</a><span style="font-size: 14px; color: #888888">,</span> <!--Конец шестой строки--> <!--Седьмая строка--> <a href="https://shakin.ru/category/other" title="Интересное" style="font-size: 12px; color: #686868">Интересное</a><span style="font-size: 12px; color: #686868">,</span> <a href="https://shakin.ru/category/creative" title="Креатив" style="font-size: 12px; color: #686868">Креатив</a><span style="font-size: 12px; color: #686868">,</span> <!--Конец седьмой строки--> <!--Восьмая строка--> <a href="https://shakin.ru/category/optimization" title="Оптимизация" style="font-size: 11px; color: #484848">Оптимизация</a><span style="font-size: 11px; color: #484848">,</span> <a href="https://shakin.ru/category/poleznye-programmy" title="Полезные программы" style="font-size: 11px; color: #484848">Программы</a><span style="font-size: 11px; color: #484848">,</span> <!--Конец восьмой строки--> <!--Девятая строка--> <a href="https://shakin.ru/category/useful" title="Полезные сервисы" style="font-size: 10px; color: #282828">Сервисы</a><span style="font-size: 10px; color: #282828">,</span> <a href="https://shakin.ru/category/socialnye-seti" title="Социальные сети" style="font-size: 10px; color: #282828">Социальные сети</a> <!--Конец девятой строки-->
Все облако категорий я поместил в отдельный слой и выровнял его по центру:
<div align="center">
Здесь код облака категорий
</div>
Вы можете экспериментировать с любыми элементами облака категорий - числом строк, цветами и размером шрифта.
Остается добавить, что код облака тегов нужно добавить в нужное место того файла, который отвечает за вывод шаблона вашего сайта. Например, у меня блога на WordPress, и код нужно вставлять в файл sidebar.php в папке с темой блога.
Желаю вам создать облако категорий по вашему вкусу!
Update: Максим, автор блога Maxsite.org и создатель замечательного движка для сайтов Maxsite CMS, прислал профессиональное решение по созданию облака категорий. Вот код Максима:
<!--
собственно сам код
здесь удобней задавать цвета сразу все
для каждой линии свой размер и цвет
-->
<style> div.catclouds {text-align: center;} span.line1, span.line1 a {color: #FFFFFF; font-size: 18px;} span.line2, span.line2 a {color: #F0F0F0; font-size: 17px;} span.line3, span.line3 a {color: #F0F0F0; font-size: 16px;} span.line4, span.line4 a {color: #E0E0E0; font-size: 15px;} span.line5, span.line5 a {color: #C8C8C8; font-size: 14px;} span.line6, span.line6 a {color: #888888; font-size: 13px;} span.line7, span.line7 a {color: #686868; font-size: 12px;} span.line8, span.line8 a {color: #484848; font-size: 11px;} span.line9, span.line9 a {color: #282828; font-size: 10px;} </style>
<h2>Облако категорий</h2>
<p class="catclouds"><!-- общий контейнер --></p>
<!--Первая строка-->
<span class="line1">
<a href="https://shakin.ru/category/seo" title="Продвижение сайтов">Продвижение сайтов</a>,
</span>
<!--Конец первой строки-->
<!--Вторая строка-->
<span class="line2">
<a href="https://shakin.ru/category/wordpress" title="Wordpress">Wordpress</a>,
<a href="https://shakin.ru/category/site-show" title="Сайт-шоу">Сайт-шоу</a>,
</span>
<!--Конец второй строки-->
<!--Третья строка-->
<span class="line3">
<a href="https://shakin.ru/category/interview" title="Интервью с популярными блоггерами и интересными людьми">Интервью</a>,
<a href="https://shakin.ru/category/webdesign" title="Веб-дизайн">Веб-дизайн</a>,
</span>
<!--Конец третьей строки-->
<!--Четвертая строка-->
<span class="line4">
<a href="https://shakin.ru/category/blog-show" title="Обзоры интересных блогов">Блог-шоу</a>,
<a href="https://shakin.ru/category/seo-answers" title="Ответы на вопросы по продвижению сайтов">SEO ответы</a>,
</span>
<!--Конец четвертой строки-->
<!--Пятая строка-->
<span class="line5">
<a href="https://shakin.ru/category/adventures" title="Приключения">Приключения</a>,
<a href="https://shakin.ru/category/google" title="Поисковая система Google">Google</a>,
<a href="https://shakin.ru/category/css" title="CSS">CSS</a>,
</span>
<!--Конец пятой строки-->
<!--Шестая строка-->
<span class="line6">
<a href="https://shakin.ru/category/english" title="SEO and webdesign in English">English</a>,
<a href="https://shakin.ru/category/firefox" title="Firefox">Firefox</a>,
<a href="https://shakin.ru/category/web-20" title="Web 2.0">Web 2.0</a>,
</span>
<!--Конец шестой строки-->
<!--Седьмая строка-->
<span class="line7">
<a href="https://shakin.ru/category/other" title="Интересное">Интересное</a>,
<a href="https://shakin.ru/category/creative" title="Креатив">Креатив</a>,
</span>
<!--Конец седьмой строки-->
<!--Восьмая строка-->
<span class="line8">
<a href="https://shakin.ru/category/optimization" title="Оптимизация">Оптимизация</a>,
<a href="https://shakin.ru/category/poleznye-programmy" title="Полезные программы">Программы</a>,
</span>
<!--Конец восьмой строки-->
<!--Девятая строка-->
<span class="line9">
<a href="https://shakin.ru/category/useful" title="Полезные сервисы">Сервисы</a>,
<a href="https://shakin.ru/category/socialnye-seti" title="Социальные сети">Социальные сети</a>
</span>
<!--Конец девятой строки-->
<!-- /общий контейнер -->
Постовой (как попасть): Биржа hitext для статейного заработка.
Оперативная заправка картриджей принтеров с выездом на дом.
Хотите знать о SEO больше, чем другие? Тогда читайте блог сеошника.
Десерт на сегодня - видеоролик о пробном заезде на спортбайке:
Подпишитесь на рассылку блога с полезными материалами по SEO
Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня