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

Здравствуйте, мы вернулись!

Вернулись мы от Челиты и Миши как и обещали 18 ноября (Какое же это было восхитителное путешествие! Спасибо Челиточка!!!) 19 уже на работу, а там... аврал одним словом, 20 ноября не смотря ни на что я начала отвечать на комментарии (все еще отвечаю). А теперь вот и до поста дело дошло... Долго думала о чем бы таком написать, но многие темы пока отложила, т.к. там надо много подробно рассказывать, а ведь сегодня воскресенье и опять я работала -- аврал все-таки, когда я говорю аврал - я не шучу, значит это он и есть.

Кстати, вот только что выяснила в википедии точное значение слова аврал: "Аврал (искажённое англ. over all «все наверх») — спешная (по специальному заданию или по тревоге) работа на судне всей командой. Со временем этот морской термин стал использоваться повсеместно, и теперь означает просто выполняемую всем коллективом спешную работу."

Про что это, кстати, я? Да, вы лучше посмотрите на календарь! О чем это вам говорит?

Неискушенный читатель отметит, что Новый год скоро... Кстати, желающие могут себе в блог напустить снежинок (не забывайте, что снежинки будут тормозить работу вашего блога, но красота и новогоднее настроение возможно этого стоят). А вот искушенные читатели уже знают, что сегодня я раскажу как поставить календарь (ну, может быть не совсем такой как в этом посте, но такой как у меня в боковой колонке) к себе в блог. А расскажу я об этом потому что Кайл lдля блога Windows to Russia нашел великолепный скрипт календаря и ему в нем абсолютно все нравилось, а мне в нем не понравилось, что календарь у Кайла показывал посты только с августа по ноябрь 2009 (слишком у Кайла много постов в месяц!).

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

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

Итак, ничего страшного нет все будем делать по шагам:

1. Помним, что этот календарь является лишь оболочкой для Blogger'овского архива, поэтом убедимся для начала, что этот элемент дизайна Архив у нас на боковой колонке присутствует. А теперь чтобы наш javascript (который мы на следующем шаге добавим в Html-код шаблона) работал, надо изменить вид элемента Архив. Вы можете это сделать из Панели инструментов кликнув на Дизайн или кликнув в вашем блоге на картинку под вашим Архивом.

И вот к какому виду вам надо привести ваш Архив:
Нажимаем Сохранить.

2. Теперь редактируем Html-код шаблона:

1) Идем Панель управления -- Дизайн -- Изменить Html

2) Галочку на Расширить шаблоны виджета НЕ СТАВИМ

3) В html-коде ищем строчку слово:

BlogArchive1

4) И ВМЕСТО строчки содержащей это заветное слово BlogArchive1 вставляем следующий код:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

4) Нажимаем СОХРАНИТЬ.

3. Продолжаем редактировать Html код шаблона:

по-прежнему НЕ СТАВИМ галочку на Расширить шаблоны виджета

ищем строчку </head>

и ПЕРЕД НЕЙ вставляем следующий код:

<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Минуточку....";
var bcArchiveNavText = "Все посты этого месяца";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
var headInitial = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->

Нажимаем СОХРАНИТЬ и идем в блог любоваться первыми результатами.

Руссификация виджета состояла в изменении английских слов на русские. Мои изменеия выделены бледно-розовым и вы их можете изменить.

Строчка ul.appendChild(li); веделена бледно-зеленым, если вы НЕ хотите под календарем показывать список сообщений за месяц удалите её. Кайл, например, её удалил (в его случае список постов получался слишком длинным ведь среднем у него 40-50 постов за месяц).

4. Переходим к наведению красоты в календаре. для этого добавим описания CSS стилей нашего календаря в шаблон.

Лично мне уже нравится как получилось, но можно продолжить.

1) Находим у себя в шаблоне строчку ]]></b:skin>

И далее идем по ссылке: Blogger Archive Calendar Styles Здесь автор этого "хака" показывает несколько стилей календарей и от вас только требуется выбрать понравившийся вам стиль календаря, скопировать код размещенный под картинкой и вставить этот код ПЕРЕД строчкой ]]></b:skin>

Что до нас с Кайлом мы подбирали цвета для календаря самостоятельно через вкладку Дизайн - Шрифты и цвета.

Чтобы у нас эта возможность появилась, ПЕРЕД строчкой ]]></b:skin> вставляем следующий код:

/* Archive Calendar Variable Setups
Do not modify unless you know what's what
=========================================

<Variable name="bcCalenderFonts" description="Календарь: размер шрифта"
type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" / value="normal normal 100% Tahoma, Arial, Sans-serif">
<Variable name="bcTableBackgroundColor" description="Календарь: Цвет фона"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcTableBorderColor" description="Календарь: Цвет рамки"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableTextColor" description="Календарь: Цвет текста"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcMenuBackgroundColor" description="Календарь: Цвет фона Меню выбора"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcMenuTextColor" description="Календарь: Цвет текста в Меню выбора"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableHeaderBackgroundColor" description="Календарь: Цвет фона заголовка"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcTableHeaderTextColor" description="Календарь: Цвет текста заголовка"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableHighLightColor" description="Календарь: Цвет выделенного"
type="color" default="#cccccc" value="#77563F">
<Variable name="bcCalenderLinksColor" description="Календарь: Цвет ссылки"
type="color" default="#0000ff" value="#FAFA0E">
<Variable name="bcCalenderLinksHoverColor" description="Календарь: Цвет ссылки при наведении"
type="color" default="#0000ff" value="#cc0000">
<Variable name="bcTableFooterBackground" description="Календарь: Цвет фона нижней части"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcFooterLinksColor" description="Календарь: Цвет ссылки нижней части"
type="color" default="#0000ff" value="#FAFA0E">

===========================================
End Archive Calendar Variables */


/* Archive Calendar CSS
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}


/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

И вот что у нас в результате получилось:

Всем удачи и хорошего настроения!
Побольше отдыхайте и поменьше работайте!

Света




Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...