четверг, 28 октября 2010 г.

[Blogger.com] Виджет для Blogger: календарь с возможностью просмотра архива блога.

Итак, свершилось. То, о чём все блогеры на blogspot так долго мечтали, глядя на ЖЖ, доступно прямо здесь и сейчас, достаточно лишь нажать одну кнопку в конце этого поста. Идея виджета принадлежит amateurblogger, а её воплощением в коде занимался ваш покорный слуга. Пока другие перепечатывают друг у друга одни и те же скрипты, гаджеты и уловки, мы таки просто сделаем что-нибудь полезное. Это было лирическое вступление, а теперь к делу.

Виджет «Календарь» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши посты. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив. (Ну или же просто можно воспользоваться им как обычным календарём — посмотреть, на какой день недели какое число приходится. :) )

Ссылка с даты календаря ведёт на соответствующий пост, если вы в этот день написали только одно сообщение, или же на страницу с кратким содержанием постов, если в тот день было больше одного сообщения. (Если вы не пользуетесь разделением на краткое и полное содержание сообщений, то, разумеется, сообщения будут там показаны целиком.) Кстати, при просмотре страниц сообщений и страниц навигации по блогу, календарь будет показывать не текущий месяц, а тот месяц к которому относятся отображаемые на данной странице сообщения.

Чтобы установить календарь в свой блог, достаточно нажать кнопку в конце данной заметки, и у вас откроется страница выбора блога, в который следует добавить виджет. Перед этим можно задать настройки календаря, хотя это совсем не обязательно — календарь отлично работает и так. В настройках вы можете выбрать внешний вид «шапки» календаря, цвет фона ячеек и язык (русский или английский). Если вам хочется видеть календарь на каком-нибудь другом языке, выберите в выпадающим списке пункт «Другой» и в появившихся полях ввода введите названия месяцев и дней недели — после этого виджет «научится» новому языку.

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

По умолчанию календарь показывает ссылки на сообщения вашего блога (т.е. того блога, на котором он установлен), но если вам по какой-либо причине захочется, чтобы он отображал ссылки из другого блога, вы можете в настройках указать нужный адрес блога. Также, если вам не нужны ссылки на сообщения вообще, снимите в настройках флажок «Отображать ссылки» — календарь-архив превратится в обычный календарик, без функции архива.

Также можете почитать статью на amateurblogger.ru, посвященную этому виджету, там всё подробно расписано (гораздо более человеческим языком, чем у меня :) ), и даже поэтапно на скришотах показан процесс установки.

И еще кое-что. Если вы разбираетесь в CSS, и хотите изменить внешний вид календаря, то вот перечисление стилей, которые вы можете настраивать для этого:

  • .iacalendar — весь календарь целиком
  • .iacalendar table — таблица с ячейками календаря (включая «шапку»)
  • .iacalendar .month_year_cell — «шапка»
  • .iacalendar .wday_cell — ячейки с названиями дней недели
  • .iacalendar .empty_cell — пустые ячейки (которые соответствуют дням недели предыдущего или следующего месяца)
  • .iacalendar .cell — ячейки с датами
  • .iacalendar .cell_X, где X цифра от 0 до 6 — ячейки, приходящиеся на соответствующий день недели (.cell_0 — воскресенье, .cell_1 — понедельник и т.д.)
  • .iacalendar .cell_future — ячейки, относящиеся к датам в будущем
  • .iacalendar .cell_long_ago — ячейки, относящиеся к датам ранее даты первого сообщения в блоге.

Эти стили лучше вписывать в таблицу стилей в head-области шаблона блога, а не в таблицу стилей внутри виджета, поскольку если вы обновите календарь, настройки в таблице стилей виджета заменятся на стандартные. Чтобы ваши настройки стилей имели больший приоритет, чем стандартные стили виджета, указывайте их с ключевым словом !important.

Update 29.10.2010. 1. Исправлена проблема с отображением апострофа во всплывающих подсказках. 2. Заголовки сообщений во всплывающих подсказках теперь также показываются и для дней, в которые было более одного сообщения. 3. Добавлена возможность задавать общий цвет фона в дополнение к цвету фона ячеек. 4. Добавлена возможность задавать ширину и выравнивание.


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

Настройки:

Вариант заголовка: Выберите оформление заголовка календаря.
Отображать ссылки: Если этот флаг установлен, даты в календаре служат ссылками на сообщения блога, опубликованные в соответствующие дни.
Адрес блога: Адрес блога, сообщения с которого будут отслеживаться календарём. Если оставить это поле пустым, календарь будет автоматически обращаться к тому блогу, на страницах которого он размещен.
Дата первого сообщения:
Год:
Месяц:
Число:
Укажите дату первого сообщения в вашем блоге. Все более ранние даты в календаре будут написаны серым цветом.
Язык: Выберите язык календаря. Если вам нужно отобразить календарь на языке отличном от русского или английского, выберите пункт «Другой» и введите названия месяцев и дней недели в появившиеся поля ввода.
Названия месяцев: Введите названия месяцев, начиная с января, разделяя их пробелами или запятыми.
Названия дней: Введите названия дней недели с воскресенья по субботу, разделяя их пробелами или запятыми.
Неделя с понедельника: Если флаг отмечен, неделя в календаре начинается с понедельника, если не отмечен, то с воскресенья (как это принято в англоязычных странах).
Текст для всплывающей подсказки: Введите текст, который будет отображаться во всплывающей посказке, показывающей количество сообщений.
Цвет фона ячеек: Цвет фона ячеек календаря. Если ни один из стандартных вариантов вам не подходит, выберите пункт «Своё значение» и введите в появившеся поле ввода другое значение цвета.
Значение цвета должно быть в формате, пригодном для вставки в CSS.
Цвет фона за ячейками: Цвет фона под ячейками календаря.
Значение цвета должно быть в формате, пригодном для вставки в CSS.
Ширина Ширина виджета. Значение в пикселях (например, 300px) или процентах от ширины доступной области (например 50%), либо auto (ширина определяется браузером автоматически).
Выравнивание Расположение виджета относительно краёв отведённой для него области. Чтобы использовать выравнивание справа или по центру, необходимо также указать значение ширины виджета, отличное от auto.

Внимание. Если у вас после добавление виджета, в панели управления блога перестала работать вкладка «Элементы страницы» (невозможно передвинуть виджеты и т.п.), для исправления ситуации достаточно зайти на вкладку «Изменить HTML» и поставить флажок «Расширить шаблоны виджета». Ничего править или сохранять на этой вкладке не нужно — просто возвращаемся на предыдущую вкладку, и там всё работает. Причина проблемы пока не ясна, возможно, это внутренняя ошибка блогспота.

33 комментария

Екатерина Михайлова

Уже все есть, можешь исправить ссылочку на статью о календаре:)

Unknown

Добрый день, Вадим! виджет установился, в блоге показывает все, только вот в панели управления проблема, обрезает страницу дизайна и ничего далее настраивать не могу. http://clip2net.com/s/AHSt - скрин.

Екатерина Михайлова

Flee.lancer, а обновлять страницу пробовали? У меня, кстати, тоже один раз так получилось, после того, как обновила страницу, все на место встало.

sdc

Да, очень странный баг, у меня тоже после добавления календаря перестаёт работаеть эта вкладка, в частности, теряется возможность перетаскивать виджеты. Баг проходит после того как зайти на вкладку правки html и поставить там флажок отображения полного содержимого шаблона. Видимо, при этом обновляются какие-то внутренние структуры движка. Попробую поэкспериментировать с добавлением на тестовом блоге, чтобы выяснить проблема с виджетом, или это баг блоггера.

Unknown

Seo-Дилетант'ка, Катерина, разумеется)) еще стары проверенный способ открыть-закрыть)) Может код цвета не подходит? хотя он отображается нормально, я его скопировала с дизайнера своего шаблона.

sdc

Проверил на пустом блоге с минимальным содержимым виджета. Баг от виджета, судя по всему, не зависит. Видимо, придётся в статью добавить описание обхода проблемы...

MackapaD

мне нравится ваш календарь, но я не понимаю как изменять его ширину и сделать по центру. в CSS я не очень разбираюсь...

sdc

Эх, Катерина мне предлагала вынести опции ширины и выравнивания календаря в настройки, и, наверное, всё же это была хорошая мысль.
PANIC, я завтра постараюсь добавить эту возможность в настройки виджета. Если желаете, можете вручную задать CSS правила, ну или подождать завтра новой версии. :) Чтобы вручную внести изменения, в настройках блога перейдите на вкладку Дизайн и далее на Вкладку Изменить HTML. В шаблоне блога после открывающего тега <head> впишите такие строчки:
<style type='text/css'>
.iacalendar table {
width: 100%;
}
.iacalendar {
margin-left: auto;
margin-right: auto;
width: 200px;
}
</style>

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

seiner

Странно, у меня после установки выскакивает вот такая ошибка:
Bad Request
Error 400
хотя вроде не на что не влияет, почему не пойму, пробовал переустановить ради интереса - тоже самое...

Lara C

И у меня
... после установки выскакивает вот такая ошибка:
Bad Request
Error 400
хотя вроде не на что не влияет, почему не пойму, пробовал переустановить ради интереса - тоже самое...

Анонимный

А у меня, после установки календаря, при проверка на валидность HTML добавляется около 30 ошибок. Подскажите пожалуйста что с этим можно сделать.
Буду очень благодарна, а то календарик очень классная и полезная вещь и не хотелось бы возвращаться на обычный архив. Буду очень благодарна за ответ.

SEO-Дилетант'ка

@seiner, @Lara - посмотрите в конце статьи абзац, начинающийся со слова "Внимание", красным цветом. Сделайте это - проблема исчезнет.

cuconestii.noi

Огромное Спасибо!!! Даже такому чайнику - как я, удалось немного приукрасить свой блог! Вы с Катей отличная команда!

Tamara

А у меня календарь не отображается только слово календарь. В html поставила галочку расширить виджеты - не помогло
http://i028.radikal.ru/1102/68/d190fb1fe45c.jpg скрин

Unknown

Огромное спасибо за календарь с архивом.
Поднял мне настроение на небывалую высоту.

AkiRo

Не отображается.
Только пишет Виджет Календарь.

sad comrade

Спасибо за календарь! Вот что у меня получилось http://s60.radikal.ru/i167/1107/4e/94e6aef23111.jpg.

Игорь

За календарь спасибо! Все удобно и все работает.

Тамара Лисица

Спасибо, всё работает с первого раза!!!

Зайцева Юлия

Спасибо большое!!!

Анонимный

Cho za??? vidget pustoi! Nichego ne rabotaet!

Bukfa

Классная штучка! А то архив очень не нравился. Спасибо огромное!

Unknown

Спасибо большое! Просто, быстро и ПОНЯТНО!)

dashinamama2011

привет, установила ваш календарь в марте 13г, нормально работал, а сег.заметила, что на нем все еще сентябрь...
что может быть?

Smiley Sunshine

Здравствуйте! Скажите пожалуйста, а можно добавить ваш календарик в Blogger? Если да, то процедура та же?

Smiley Sunshine

Еще раз просмотрела заголовок - видно, что можно :) только вот не получается :( По-моему, оно хочет код самого виджета для размещения в блоге..

Unknown

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

Елена Осипенко

У меня такой же эффект, как у Арьи

Анонимный

ВОБЩЕ НЕ РАБОТАЕТ ЕГО НАДО ПЕРЕДЕЛЫВАТЬ

MadLab86

Добрый день! При сохранении код не выставляется..что делать?

Karymov

Кода нет

Bukfa

Добрый день!
А у меня перестал двигаться - стоит только на текущем месяце???

Unknown

Доброго вам дня... Меня зовут Гор... Я очень хочу поставить этот архивный календарь в моем блоге но когда я все делаю как сказано, на новом окне открываеться вот такой надпись
400. That’s an error.
The requested URL was not found on this server. That’s all we know.
И ничего не вазмпжно сделать виджет не работает... все что я пробпвал не дало результатов... помогите исправить все это... И нослаждаться красивым архивом... Ответьте пожалуйста обязательно, мне это очень нужен...

Отправить комментарий