Home » Blogger Tutorials, Tricks and Hacks » Archive Calendar Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Archive Calendar Widget

Archive Calendar Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,343 views

Here’s an interesting tutorial that can add a new look to your Blogger blog. The Archive calendar is a widget that is a WP type with custom styles, which is shared by Mohammad Mustafa Ahmedzai.

Below are the simple steps on adding it to your site:

  • Go to Blogger Dashboard > Layout.
  • Select Blog Archive widget from the default widget directory.
  • Select these options: Select Style as Flat list, uncheck “Show Oldest Posts Firsts”, select archive Frequency as monthly, for the Date Format, you can set it to anything.
  • Save.
  • Go to Blogger Dashboard > Settings > Template > Edit HTML > Proceed.
  • Look for these codes:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

If you can’t find this, simply search for BlogArchive and look for same code.

  • Replace that code with the ones below:
<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>
  • Look for </head> and paste this code above it:
<!-- Blogger Archive Calendar by  www.MyBloggerTricks.com --> 
<script type='text/javascript'> 
//<![CDATA[ 
var bcLoadingImage = "http://mybloggertricks.googlecode.com/files/loading-trans.gif.png"; 
var bcLoadingMessage = " Loading...."; 
var bcArchiveNavText = "View Archive"; 
var bcArchiveNavPrev = '◄'; 
var bcArchiveNavNext = '►'; 
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 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 by www.MyBloggerTricks.com  -->
  • Save.

Note: Before editing your template, create a backup first.

You can also customize your new calendar by adding more colors and styles to it.

 

 

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Chris says:

    Great guide/tut. Works great and perfectly. Is there any way to make it smaller though? I feel it’s a bit too big/oversized.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here