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

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

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

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 элемента в шаблоне, который вы будете заменить или править. Напоследок хочу сказать спасибо за описание данного хака авторам данной статьи с Blogger Tip.

P.S. Постовой. Как и где заработать дизайнеру и блоггеру в журнале toribloger: freelance, blogging and my life.
Сharming and beautiful russian woman wants to meet nice men.
Компания "ГАЛИОН" входные группы, витрины - высокое качество и большой опыт работы.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails