在Blogger加入月曆

Blogger雖然好用，但卻沒有提供月曆的功能。換言之，像無名、雅虎奇摩等知名部落格都有提供月曆，供讀者以月曆列表的模式點選作者的文章。在網路上找尋尋覓覓，終於找到http://phydeaux3.blogspot.com/這個部落格，作者phydeaux3傳授在Blogger(Beta)上加入月曆的方法，試了半天終於被我try出來，希望Blogger可別再改程式碼而使得這個月曆可以一直正常顯示文章列表。廢話不多說，咱們就來練習改改看。
步驟一：無論如何都要先備份
請務必將您的Blogger模版範本給存起來，就算無法加上月曆，也不要連Blogger都無法正常顯示。

步驟二：新增存放月曆的網頁元素
到[範本]>>[修改HTML]，不要勾選[展開小裝置範本]，然後在Sidebar-wrapper附近找出下列這行語法
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
找到之後請以下列語法覆蓋上面這一行

<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>

步驟三：插入月曆格式文章列表之語法
到[範本]>>[修改HTML]，不要勾選[展開小裝置範本]，然後在 </head>附近找出下列語法
=======================================
]]></b:skin>

在此插入月曆格式文章列表語法

 </head>
=======================================
插入的語法如下

<!-- Blogger
Archive Calendar -->

<script type='text/javascript'>

//<![CDATA[



var timeOffset = "+00";

var bcLoadingImage = "http://www2.blogger.com/img/spinner_white.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"];





// Nothing to configure past this point
----------------------------------

var calMonth;

var calDay = 1;

var calYear;

var startIndex;

var callmth;

var bcNav = new Array ();

var bcList = new Array ();



// Encode the timeoffset duh

timeOffset = encodeURIComponent(timeOffset);



//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';

   img.style.display = 'inline';

   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 =
'/feeds/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'%3A00&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'%3A00&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];

      var link =
entry.link[0].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+'%3A00&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'%3A00"
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);

     }

  //Initialize the select menu

  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');

 }



//]]>

</script>


插入語法後記得儲存部落格範本。

步驟四：新增並設定文章列表之網頁元素
除了紅色的標題可自訂之外，其它請依下圖設定。


月曆的設定到此大功告成，作者phydeaux3提供了五種月曆格式讓您自由選擇，本站的範例為Plain Base Style，如欲改成其他格式請自行至下址參考：
http://phydeauxredux.googlepages.com/Blogger-Archive-Calendar-Styles.html