SEO блог Михаила Шакина

  • Контакты
    • Реклама на блоге
    • Мои интервью
    • Мои доклады
  • Мои книги
    • Мои приключения в Америке
    • SEO Коллайдер
    • SEO разведка
    • SEO Винчестер
  • Услуги
    • Продвижение сайтов
    • Консультации по продвижению сайтов
    • Консультации по продвижению англоязычных сайтов
  • Лучшее
    • Продвижение сайтов
    • Приключения
    • Видеоуроки
    • WordPress
    • Блоггинг
    • Привлечение посетителей с социальных сетей
    • Саморазвитие и работа в интернете
    • Вебмастеру
  • Мой хостер

Как сделать облако категорий на любом сайте

30.09.2010

Сайт дня (как попасть): Есть вопросы? У нас есть ответы! Портал по нахождению ответов для вебмастеров.

Дорогие друзья, сегодня я расскажу о том, как сделать облако категорий. Эта схема подходит для любого сайта на любом движке (либо сайта из статических HTML страниц). Пример такого облака категорий вы можете посмотреть в оранжевой боковой колонке на shakin.ru. Вы также можете почитать другие материалы - Как добавить кнопки социальных сервисов на свой блог и Как добавить Вконтакте на свой сайт.

Как сделать облако категорий на любом сайте

Источник фото: Dazeen

Облако категорий смотрится необычно, занимает меньше места и выглядит привлекательнее, чем обычный список категорий. Плюс можно выделить большим шрифтом те категории, которые вы считаете наиболее важными.

Как-то мне пришло вдохновение и я заменил скучный список категорий красивым облаком. Меня часто спрашивают, как это реализовано, с помощью какого плагина. Мой ответ - красоту нужно создавать вручную, она не поддается автоматизации. Все сделано просто.

Для реализации красивого облака категорий достаточно минимальных познаний в HTML. Вот какое облако получится в результате:

Облако категорий - category cloud

Сначала подсчитаем, сколько у нас категорий. На shakin.ru их 19. Я решил расположить их в 9 строк.

Я решил разместить облако категорий поближе к контенту, на оранжевой боковой колонке. Попробовал разные цвета и пришел к выводу, что оптимально подходит следующая схема - верхняя строка должна быть белой, а нижняя - темно-серой. Остальные должны создавать эффект градиента (плавного перехода от белого к темно-серому).

Размер шрифта должен постепенно уменьшаться от верхней строки к нижней. Вы можете попробовать мою схему или поэкспериментировать с цветами на свой вкус.

Я люблю простые решения, поэтому не стал выносить стилевые оформления в файл стилей CSS, а оформил все прямо в HTML коде. Можно оформить облако категорий разными вариантами, меня полностью устраивает приведенная ниже схема.

Итак, приступим. Для начала найдем таблицу с HTML цветами, вот она. Таблица с переходами от белого к черному (Shades of Gray) находится в середине указанной страницы:

таблица HTML цветов Shades of Gray

Теперь скопируйте адреса категорий на вашем сайте в отдельный текстовый файл. Для удобства работы и подсветки кода лучше работать не в обычном блокноте, а в каком-нибудь продвинутом текстовом редакторе, например, в Notepad++.

Делаем первую категорию ссылкой:

<a href="https://shakin.ru/category/seo">Продвижение сайтов</a>

К ссылкам я дописал атрибут title, чтобы при наведении на ссылку всплывала подсказка. В него можете поместить название категории или пояснительный текст:

атрибут title

С атрибутом title код ссылки будет таким:

<a href="https://shakin.ru/category/seo" title="Продвижение сайтов">Продвижение сайтов</a>

Для первой строки (которая будет самой светлой) я выбрал белый цвет #FFFFFF и размер шрифта в 18 пикселей:

Читайте также:  14 лет блогу shakin.ru. Видео с поздравлениями

#FFFFFF

Для самой темной девятой строки я выбрал цвет #282828 и размер шрифта в 10 пикселей:

#282828

Для остальных строк подберем цвета в промежутке между белым #FFFFFF и темно-серым #282828. Вторую и третью строки я решил сделать одного цвета. Я попробовал много разных комбинаций цветов и в итоге пришел к следующей схеме (указана строка и цвет для нее):

таблица HTML цветов - HTML color table

Добавим цвет и размер шрифта для первой строки:

<!--Первая строка-->

<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>
<!--Конец девятой строки-->

Все облако категорий я поместил в отдельный слой и выровнял его по центру:

Читайте также:  SEO для сайтов фотографов

<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


Читайте также:

  • 14 лет блогу shakin.ru. Видео с поздравлениями
  • 11 лет блогу shakin.ru. Видео с поздравлениями
  • 12 советов по регистрации домена
  • 13 лет блогу shakin.ru. Видео с поздравлениями
  • Итоги 2018 года и планы на 2019

Категория: Интересное Теги: вебмастеру, интересное, советы

Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня консультации по продвижению вашего сайта в рунете или англоязычном интернете. Мои контакты.

Shakin.ru в соцсетях

Мои каналы и чат в Telegram

Категории

Продвижение сайтов
Приключения
Видеоуроки
SEO ответы
Wordpress
Интервью
Блог-шоу

Полезное

Что я использую в работе

Моя книга про Америку

Книга Михаила Шакина про приключения в Америке

В случае перепечатки материалов обязательно мое письменное разрешение и прямая индексируемая ссылка на Shakin.ru
© 2007-2022 Shakin.ru
Политика конфиденциальности
Пользовательское соглашение