Архив в виде календаря на Blogger

Шаг 0. Иллюстрация

Речь пойдёт о превращении гаджета Архив в календарь. Наблюдал это чудо на нескольких блогах платформы Blogger. Реализация понравилась. Легко и удобно осуществлять навигацию по архиву. Исходные материалы по установке и настройке находятся здесь. Владеющие английским языком могут перейти по ссылке и выполнить все действия ориентируясь на оригинальные инструкции.

Установка займёт около пяти минут. С настройкой цветов и дизайна придётся повозиться неопределённое количество времени. Или взять стандартный шаблон, при условии что он впишется в дизайн блога. IMHO, у меня вписался.

Для русскоязычной аудитории расскажу обо всём по-порядку со ссылками на оригинальные скрипты.

Шаг 0. В календарь трансформируется архив блога. На большинстве блогов этот гаджет установлен. Если нет, то идём в Панель инструментов - Макет - Элементы страницы - Добавить гаджет. И добавляем стандартный гаджет Архив блога (Показывать ссылки на предыдущие сообщения).

Шаг 1. Установка. Идём в Панель инструментов - Макет - Изменить HTML. На всякий случай Обязательно сохраняем копию шаблона, прежде чем вносить в него изменения. Галочку Расширить шаблоны виджета не нажимаем (оставляем значение по умолчанию). Находим строчку:

<b:widget id='BlogArchive1' locked='false'
title='Blog Archive' type='BlogArchive'>

Значение параметра title может иметь иное значение, например 'Архив' или 'Blog Archive'.
Эту строку надо заменить текстом, расположенным по ссылке:
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar.html#step1
Сохраняем шаблон, чтобы убедиться в правильности выполненных действий по копированию и вставке.

Шаг 2. В шаблоне находим следующий фрагмент:

]]></b:skin>
</head>

Между этими тегами надо вставить скрипт, расположенный по ссылке:
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar.html#step2
Должно получиться следующее:

]]></b:skin>

вставленный фрагмент текста

</head>

Снова сохраняем шаблон.

Шаг 3. Идём в блог и смотрим результат. Возможно, вы увидите такое отображение архива:Не пугайтесь. Надо всего лишь изменить настройки гаджета. Идём в Панель инструментов - Макет - Элементы страницы. Выбираем наш гаджет и давим кнопку Изменить.

Редактируем следующие параметры:

• Заголовок - ваш заголовок по желанию
• Стиль - Простой список
• Параметры - опция "Показывать самые старые сообщения первыми" должна быть отключена
• Частота обновления архива - кажд. месяц
• Формат даты - выбирайте любой вариант из раскрывающегося списка

Сохраняем и получаем календарь в таком невзрачном виде:

Шаг 4. Настройка стиля. Самый трудоёмкий этап, если хотите получить нечто оригинальное. Можно выбрать один из предлагаемых шаблонов по ссылке:
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar-Styles.html
Здесь представлено 5 стандартных стилей: Plain, Dark, White, Blue, DustyBlue. Один из них мне понравился. И я воспользовался готовым вариантом.
Также можно установить настраиваемый пользователем стиль:
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar-Styles.html#fontcolor
В любом случае идём в Панель инструментов - Макет - Изменить HTML. Копируем скрипт выбранного стиля, вставляем перед тегом ]]></b:skin>.
Сохраняем и смотрим на результат.
Если был выбран настраиваемый стиль, можно поколдовать, изменяя цвета и шрифты. Идём в Панель инструментов - Макет - Шрифты и цвета. В прокручивающемся списке шаблонов в самом низу находим новые шаблоны, начинающиеся со слова "Calendar". Меняем эти настройки по своему усмотрению, обновляем блог, просматриваем гаджет Архив. И так до тех пор, пока не настроите Календарь своей мечты. Или пока не осточертеет.
Возможно, когда мне надоест стандартный вариант и выдастся свободное время, перейду к настраиваемому стилю и поиграю в настройки календарных цветов.

Шаг последний. Русификация. Возможно, вы захотите переписать по-русски названия дней недели и других меток. Для этого придётся изменить значения переменных. Описание находится здесь:
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar-Settings.html
Снова идём в Панель инструментов - Макет - Изменить HTML. Ищем фрагмент:

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

Присваиваем некоторым переменным новые значения. Первые две переменные bcLoadingImage и bcLoadingMessage отвечают за показ картинки и надпись во время загрузки Архива. Можно сменить картинку. Loading сменить на Загрузка. bcArchiveNavText - ссылка на архив выбранного месяца, можно заменить на Просмотр или Архив. В переменных headDays и headInitial пишем полные и краткие названия дней недели по-русски. Соблюдая порядок. То есть начинаем с воскресенья.

Вот что получилось у меня:
Наверняка вы заметили, что в рассмотренном гаджете дни недели начинаются с воскресенья. Мне с понедельника привычней. Как это сделать - не знаю. Надо изучать исходный код.

ЗаRSSить

Похожие статьи: