Выводим теги для блога в виде выпадающего списка

Сегодня расскажу об одном простом хаке для Blogger, который позволяет сделать компактный вывод тегов для блога. Механизм не новый, давно уже пылиться в архиве моих тем для постов, тем не менее, может пригодиться. Одним из обязательных элементов блога является список меток, которые используется в качестве дополнительного элемента навигации в сайбдаре. Изначально он обладал весьма скромным функционалом, но сейчас там можно не только выбирать нужные для отображения тега, а и выводить их в виде облака тегов. Когда я только начинал вести свой первый проект, приходилось применять специальный хак для облака тегов в Blogger.

Так вот можно для тегов применить еще один вид отображения – выпадающий список. Это позволит сэкономить много места в сайдбаре, если количество тегов у вас большое. Конечно, нужно находить при этом «золотую середину», потому что при большом числе записей даже список будет выглядеть непривлекательно. Учитывая тот факт, что сейчас теги можно выбирать, то есть возможности разбиения общего списка на части – например, имеются 4-5 крупных разделов и для каждого из них выводить список тегов. Кстати, в Блоггере можно выводить списком записи из Архивов, но вот для тегов пока все остается по-старому. Поэтому сегодня расскажу как вывести теги в виде выпадающего списка, как-то так:

Для «превращения» нам понадобиться выполнить несколько простых шагов.

1. Во-первых, делаем бэкап шаблона дабы потом все можно было восстановить в случае ошибки. Для этого заходим в раздел Дизайн – Изменить HTML и нажимаем на ссылку «Загрузить весь шаблон». В результате вы получите XML файл, из которого потом можно будет восстановить макет блога.
2. На втором шаге нужно создать виджет тегов (меток) и разместить его в сайдбаре блога. Проверьте, есть ли соответствующий виджет в разделе Дизайн – Элементы страницы. При его отсутствии нужно будет создать новый.
3. Возвращаем к редактированию шаблона в раздел Изменить HTML, где в отличии от многих других случаев нужно оставить галочку в поле «Расширить шаблоны виджета» пустой – ищите ее сразу над текстовым полем с кодом шаблона.
4. Находим в коде шаблона Blogger строку:

<b:widget  id='Label1' locked='false' title='Labels' type='Label'/>

И заменяем ее на следующий код:

<b:widget  id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Сохраняем шаблон и смотрим что в итоге получилось. Причем здесь в строке:

<option>Select  a label</option>

Вы можете выводить свой вариант текста для выбора тегов. После установки данный элемент можно переносить в другое место сайдбара в разделе Элементы страницы, но не удалять. При удалении, придется настраивать все заново. Можно еще отредактировать свойства элемента, где выбрать различные варианты вывода тегов – по популярности или по алфавиту.

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