Россия+7 (495) 960-65-87

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

Россия+7 (495) 960-65-87
Шрифт:
0 13464

1. Понятия тег и «облако» тегов, функциональность облака
2. Создание структуры облака тегов
3. Создание облака тегов («Ярлыков») в Blogger
4. Замена рубрики Ярлыки на теги

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

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

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

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

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

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

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

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

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

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

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

3. Создание облака тегов («Ярлыков») в 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 li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

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


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

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

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><div id='labelCloud'/><script type='text/javascript'> function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] < cloudMin){ continue; } for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script><noscript><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/>< a expr:href='data:label.url'><data:label.name/></a></b:if> (<data:label.count/>) </li></b:loop></ul></noscript><b:include name='quickedit'/></div></b:includable></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», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок:

<p class='post-footer-line post-footer-line-2'><span class='post-labels'><b:if cond='data:post.labels'><data:postLabelsLabel/><b:loop values='data:post.labels' var='label'>< a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if> В нем вместо строки < data:postLabelsLabel/> (выделена жирным) пишем любой другой нужный вам текст, например – «теги».

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

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

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Светлана Зубрицкая
    1
    комментарий
    0
    читателей
    Полный профиль
    Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
    #SEOnews14: мы празднуем – вы получаете подарки!
    Rizat Sundetov
    1
    комментарий
    0
    читателей
    Полный профиль
    Rizat Sundetov - 14
    Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
    Георгий
    1
    комментарий
    0
    читателей
    Полный профиль
    Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
    Война с дубликатами. Как нужно и как не нужно канонизировать URL
    Ann Yaroshenko
    5
    комментариев
    0
    читателей
    Полный профиль
    Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
    «Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
    TehotdelSamara@gmail.com
    4
    комментария
    0
    читателей
    Полный профиль
    TehotdelSamara@gmail.com - Артур! Задели своим комментарием "за живое") Абсолютно,... целиком.... и полностью согласны с вами! А именно, с тем, что продажи клиента зависят в первую очередь от клиента, перечисленных вами выше и других факторов! А ещё с тем, что чистое SEO в классическом его понимании зачастую уже не даёт результата в виде роста продаж. Если хотим увеличить продажи - нужно бить по всем фронтам, SEO - только один из них, об этом клиент должен знать и быть предупреждён... Касательно нашей рекомендации смотреть на эффективность по тому, увеличилось ли число и качество заказов или нет - в контексте данной статьи говорится о том, что SEO бывает разное. По большому счёту, результат SEO — это именно привлекаемый поисковый трафик. И этот трафик может быть качественным, целевым или нет. Кроме того, трафик должен расти. Мы говорим о том, что если специалист хорошо проработал семантику, изучил бизнес клиента, исключил фразы с околонулевым спросом и проч., то трафик должен быть целевым, растущим, что значит рост обращений в отдел продаж клиента !при условии! , что само предложение и сайт располагают к тому, чтобы обратиться в отдел продаж клиента. Действительно, современное SEO предполагает учёт значительного количества факторов, в том числе и коммерческих. Без этого и трафика зачастую не будет. Нужно доносить всё это до клиента, включать подобные работы в стоимость по SEO или отдельно. А с "хочу все подряд за 25к в месяц" мы сталкиваемся тоже. Тут только пояснять и подсказывать, давать рекомендации заранее, чтобы клиент заранее был предупреждён о том, что ему требуется сделать параллельно с нашими работами по SEO. И в итоге вся эта деятельность должна привести к росту целевого трафика как на сайт, так и в отдел продаж.
    Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
    Евгений
    2
    комментария
    0
    читателей
    Полный профиль
    Евгений - а у вас какое впечатление от статьи?
    Как я пытался купить CRM-систему, но мне ее поленились продать
    Kristina
    1
    комментарий
    0
    читателей
    Полный профиль
    Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
    BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
    Kosta Bankovski
    3
    комментария
    0
    читателей
    Полный профиль
    Kosta Bankovski - Иногда такое случается, попробуйте следующий способ: 1. скачать документ в формате .xlsx, 2. импортировать его в новую таблицу. Может на 5 минут подвиснуть или выдать ошибку, но потом загрузится. Если не будет получаться, напишите в личку на ФБ, я отправлю лично. bit.ly/FB-Kosta-Bankovski
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    7
    комментариев
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    Как вывести сайт в ТОП 10 Google в 2019 году
    Анна Макарова
    355
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Сергей, в нашей отрасли много заимствований из английского, иногда с ними быстрее, проще .Но будем стараться ))
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    355
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    105
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    69
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

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