Небольшое меню для категорий


Категории пришли в блоггер из вордпресса и других движков. Там хранение и вывод постов основаны именно на них, а теги привязываются для ускорение навигации.
В блоггере иная структура. Посты распределяются не по категориям, а по датам. Теги выполняют ту же функцию.

В этом году стало модно на блогспоте иметь отдельный виджет категорий, который делается из обычного облака тегов в выборочном режиме. Автор заводит 5-8 супер тегов для своего блога и пускает их под категории, остальные - под ярлыки (теги).

Перед вами небольшая табличная менюшка для отбражения категорий в сайдбаре:

html jquery
js виджеты
шаблон хитрости
фиды сервисы

Это была демка, а ниже код:
<table border="0" bordercolor="" width="" bgcolor="" cellspacing
="12" cellpadding="10">
<tr>
<td> <img border="0" src="http://3.bp.blogspot.com/-OFeq0RtL5kw/TpMgtWIt4PI/AAAAAAAAGIE/ed5yqhGOwJg/s1600/tag_blue.png" /> </td>
<td><a href="http://blogger.omg-linux.ru/search/label/html">html</a> </td>
<td> <img border="0" src="http://2.bp.blogspot.com/-hdts4a60_NE/TpMg1CrQ4AI/AAAAAAAAGI8/gpurM17fQiI/s1600/tag_yellow.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/jquery">jquery</a></td>
</tr>
<tr>
<td> <img border="0" src="http://2.bp.blogspot.com/-ibYQSicf9Z8/TpMgt07ZEaI/AAAAAAAAGIk/FbnzcP9Tf9o/s1600/tag_red.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/js">js</a> </td>
<td> <img border="0" src="http://2.bp.blogspot.com/-prT55O-gCwc/TpMgtnrMnKI/AAAAAAAAGIM/XdKGGvnzcUY/s1600/tag_gray.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B">виджеты</a> </td>
</tr>
<tr>
<td> <img border="0" src="http://2.bp.blogspot.com/-q75i-yeQ7FQ/TpMgtmmRotI/AAAAAAAAGIU/uh1vnLaWt9I/s1600/tag_green.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD">шаблон</a> </td>
<td> <img border="0" src="http://2.bp.blogspot.com/-3hWqaTJFYhE/TpMgt2QGjuI/AAAAAAAAGIc/EqCEjyaZvpA/s1600/tag_orange.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/%D1%85%D0%B8%D1%82%D1%80%D0%BE%D1%81%D1%82%D0%B8">хитрости</a> </td>
</tr>
<tr>
<td> <img border="0" src="http://1.bp.blogspot.com/-mvALOaWmHFQ/TpMg09pWLzI/AAAAAAAAGIs/awN0g_3Jh20/s1600/tag_violet.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/%D1%84%D0%B8%D0%B4%D1%8B">фиды</a> </td>
<td> <img border="0" src="http://4.bp.blogspot.com/-cVr0xJBYme4/TpMg1HHcylI/AAAAAAAAGI0/csnNJfUCuzU/s1600/tag_white.png" /> </td>
<td> <a href="http://blogger.omg-linux.ru/search/label/%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D1%8B">сервисы</a> </td>
</tr>
</table>

Регулировки.
Как видно, в подсвеченном коде, всего 4 блока и в каждом по две пары: изображение + ссылка. Для использования необходимо (с помощью любого блокнота) изменить ссылки на свои (берутся с облака тегов), и всё это дело запихнуть в html виджет/гаджет блоггера.
Ширину можно чётко задать в параметре table в width, например, width="200".
Cellpadding - отступ от рамки до содержимого ячейки.
Cellspacing - расстояние между ячейками.

2 комментария:

  1. Your design is so exclusive when compared with numerous others. Thanks for publishing whenever you possess the possibility,Guess I'll just make this bookmarked.two

    ОтветитьУдалить
  2. Thank you. Yes, design in many ways unique, because the template I made a template on their own.

    ОтветитьУдалить