×
Россия +7 (495) 139-20-33

Создание «облака» тегов в Blogger

Россия +7 (495) 139-20-33
Шрифт:
0 15352

Понятия тег и «облако» тегов, функциональность облака

Те́ги (тэг, англ. Tag) в SGML (в HTML, WML, языках семейства XML) — набор специально оформленного текста, который сообщает информацию о некотором куске текста в документе. Например, с помощью тегов HTML сообщается, какими свойствами должен обладать тот или иной фрагмент текста на странице. Иногда тегами называют маркеры вики-разметки. В текстах об XML редко используется термин «теги», так как XML язык более высокого уровня, и в его случае оперируют элементами XML, не касаясь уровня тегов.

Облако тегов или туча ярлыков (англ. tag cloud) — визуальное представление списка ярлыков (или категорий).

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

Облако тегов - это один из инструментов, пришедший к нам с появлением web2.0, является по сути дополнительным элементом навигации на сайте или блоге.

Популярность и актуальность облака тегов как элемента навигации может подчеркнуть тот факт, что в недавнем обновлении движка для блогов WordPress 2.3 он был добавлен в административной системе по умолчанию.Внутри облака сами слова–теги могут быть разных размеров, в зависимости от частоты их упоминания. То есть можно лишь взглянуть на облако, чтобы понять, о чем пишет данный автор и что его интересует на самом деле больше всего.Недавно читал о появлении облака тегов, где отдельные теги могут выделяться цветом и «подсвечиваться» фоном, но, по моему мнению, это уже просто «дискотека» какая-то получается. В общем, решение весьма сомнительное, выделения размеров шрифта достаточно.

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

Создание структуры облака тегов

Дабы не запутываться в бесконечном количестве тегов, я решил разбить их по трем основным направлениям: темы постов, типы и цели. К темам в моем случае относятся:Web разработка: HTML, CSS, JavaScript, PHP, Ajax, CMS.ИТ (информационный технологии): Hardware, Software, Web, компьютерные игры.Дизайн: фотография, веб-дизайн, графические редакторы, кисти, иконки, photoshop.Блогинг: новости блогосферы, движки, тенденции, социальные сети.SEO и монетизация: SEO, монетизация блога, заработок в интернете.

Это лишь небольшое количество тем и подразделов. Все приводить нет смысла, многие еще появятся – это необратимый процесс. Так, например, в моем блоге можно встретить совсем не интернетовские теги «Юмор» и «Футбол».

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

Создание облака тегов («Ярлыков») в Blogger

В Blogger теги называются «Ярлыками», которые можно установить для всех ваших сообщений. Чтобы добавить ярлыки на сайт, требуется добавить новый элемент страницы в шаблон. Тип элемента выбрать «Ярлыки». К сожалению, по умолчанию перечень тегов сложно назвать полноценным облаком, это больше смахивает на обычный список ярлыков, которые можно отсортировать по алфавиту или частоте использования. Для достижения классического вида облака требуется произвести некоторые модификации в шаблоне.

Внимание! Перед внесением любых изменений настоятельно рекомендуется сделать копию вашего шаблона блога и сохранить в файле на локальном компьютере.

После этого можно со спокойной совестью приступить к модифицированию базового кода. Для начала заходим в блог, раздел «Шаблон», выбираем меню «Элементы страницы». И создаем новый элемент типа «Ярлыки». Хотя, в принципе, это можно сделать и после модификации облака тегов.

Далее заходим в пункт меню «Изменить HTML». Метку в верхнем правом углу «расширить шаблоны виджета» отставляем неизменной – это несколько упростит работу. Итак, теперь приступим непосредственно к правке кода, которая состоит из трех частей.

1. Первую часть кода необходимо добавить в секцию стилей, которая отмечена тегами skin. Чтобы особо не вникать в структуру шаблона, другими словами – находим место в шаблоне и размещаем код до него:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:""!important}

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


Все строки могут быть изменены, но объясним их значение позже. Пока для нас важно, чтобы заработали эти настройки по умолчанию.

3. Теперь займемся модификаций виджета «Ярлыки». Находим в шаблоне место b:widget. Копируем следующий код от начала до конца и заменяем им данную строку.













После этого сохраняем изменения в шаблоне и проверяем результат. Если что-то не работает, то значит где-то допущена ошибка. Поэтому нужно проделать всю процедуру заново очень внимательно!

Возможная ошибка при создании облака. Убедитесь, что хотя бы один из тегов имеет повторение, т.е. использован более одного раза. Кроме того, нельзя использовать в тегах символ двойных кавычек ". При этом разрешатся писать одинарную кавычку ' или апостроф.

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

var cloudMin= 1;

Позволяет ограничить число тегов в облаке – параметр указывает количество повторений, требуемых для включения тега в облако. То есть, если вы установите, например, 3 – то в облаке тегов будут отображены только ярлыки с тремя и более повторениями. Настройка, приведенная выше, позволяет отобразить все теги.

Переменные maxFontSize, maxColor соответственно задают размер шрифта и цвет для тега, который встречается в облаке наиболее часто. По аналогичному принципу работают переменные minFontSize, minColor, только для тегов с наименьшим повторением. Параметры всех ярлыков, расположенных между максимальным и минимальным значениями, рассчитываются исходя из общего количества тегов и частоты их употребления.

Чтобы получить нужный вам вариант оформления облака тегов, нужно немного поэкспериментировать с цветом и размерами. Кроме того, для облака необходимо достаточное количество ярлыков, 3-4 будет маловато.

Внимание, когда вы изменяете настройку цвета, придерживайтесь нужного формата, приведенного в примере – использование закрывающих кавычек [] и разделения значений запятыми. Если вы не в курсе RGB кодов для цветов, можете воспользоваться следующей таблицей (нужные значения в первой колонке).

Последняя переменная lcShowCount может принимать значения «истинно» (true) и «ложно» (false). Отвечает за отображение количества повторений того или иного тега в блоге. По умолчанию эта настройка выключена.

Что касается секции стилей (CSS), то там также есть несколько мест, которые можно изменить под себя.

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Здесь вы можете изменить шрифт, используемый в облаке, или же выравнивание:

text-align:justify;
text-align:right;
text-align:left;

Если вы хотите, чтобы теги выстраивались в столбик, то в строке:

#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0!important;}

Заменяем display:inline; на display:block;.

И напоследок строка:

#labelCloud .label-count

Она задает стиль для метки количества вхождений. Конечно, если данная особенность облака активирована.

4. Замена рубрики Ярлыки на теги

Если и этого вам мало, можно сделать для блога еще одну фишку. Вы, наверное, заметили, что Blogger использует вместо понятия тегов «Ярлыки». Это тоже можно изменить. И, соответственно, под каждым сообщением идет перечень установленных вами тегов, перед которыми используется слово «Ярлыки». Можно это изменить!

Заходим в раздел «Шаблон», меню «Изменить HTML», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок:

В нем вместо строки data:postLabelsLabel/ (выделена жирным) пишем любой другой нужный вам текст, например – «теги».

Использованная литература.

Автор: Тодосийчук Александрaka Tod

(Голосов: 6, Рейтинг: 4.67)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
От количества к качеству: что происходит с рекламой в Рунете
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Истину глаголите!
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Григорий Романченко
1
комментарий
0
читателей
Полный профиль
Григорий Романченко - Неудивительно, что все хвалят PostMarket, это действительно достойный сервис, недавно стали через них продвигать свой продукт, результаты есть, продажи выросли на 40% и это только начало.
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
91
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!