Как переделать гаджет архивов в Blogspot

В Blogger среди виджетов есть почётный и самый старый виджет/гаджет - Архив блога. Он показывает в нескольких вариантах разделы блога. Это и есть самые настоящие категории, за которые мы привыкли считать ярлыки (теги):

Про манипуляции с архивами я уже писал. С архивными страницами надо быть очень острожными. Они могут помочь в индексации, а могут и под санкции Яндекса подвести. Обычно эти страницы регулируются метатегом, позволяющим поисковому роботу следовать по ним, но не индексировать.

У меня архивы (в сайдбаре) были представлены разбивкой по месяцам:

Стили к виджету:

#BlogArchive1 {

 width: 80%; 

 border:1px solid #ebedef; 

 border-radius: 10px; 

 -moz-border-radius:10px 10px 10px 10px;

 box-shadow:2px 2px 3px #ebedef; 

 -moz-box-shadow:2px 2px 3px #ebedef 

 -webkit-box-shadow: #999 2px 2px 3px;

 padding: 10px;

 background-color:#f3f3f3;

 background-position: top left;

 background-repeat: repeat-x;	

}

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

Серый прямоугольник я сделал с помощью стилей (см. выше)), привязав их к id='BlogArchive1' (см. расширенный шаблон блога). Аналогично поступил и с другими виджетами.
На этом кастомизация вижета архивов закончилась, потому что ничего лучше придумать я не смог.

Но сейчас возникла идея немного изменить и приблизить внешний вид "архивного" виджета вот как таким модным штукам ↓

Примеры:

Категории на странице библиотеки кнопок Яндекса

Метки/теги на # ХэшКод

Для этого придётся расковырять виджет и внести изменения в его код.

Начали...

Лезем в редактор шаблона. Там, в самом виджете (найти по слову archive) интерес представлят строка:

      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>

Это название категории/раздела (в нашем случае месяца), ссылка на неё (ссылка на архивную страницу) и счётчик постов в этом разделе (месяце).

Видоизменяем на:

      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> x <data:i.post-count/>
      </li>

И можно сразу добавить тег span с классом post-count для "множителя" х и счётчика:

      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> <span class='post-count'>x <data:i.post-count/></span>
      </li>

Вдобавок сразу рисуем стили (надо стырить у Яндекса):

.archivedate a {
background: #E4F5BA;
border-radius: 3px;
color: #2A7700;
font-size: 93.75%;
line-height: 1.33;
#margin: 0px;
padding: 3px 5px;
}

.post-count {
color: #BBBBBB;
font-size: 110%;
font-weight: 700;

В итоге получится вот такой виджет архивов:

Тоже самое можно сделать с облаком тегов в виде списка. Можно сделать несколько таких виджетов с разным содержимым и стилями.