Archive Calendar Widget For Blogger

Anonymous 7:25 AM seo , tutorials No comments

Hi pals, we've posted about tutorial quiet a while, I have been looking for this since last year when i'm building an article blog for one of my friend. so i brought to you a Calender for your blog achieve.. I saw this tutorial on a blog last week but not easy, so i took my time to take the codes from the blog and add it to others from MYBLOGGERTRICKS. Meanwhile, this tutorial is for only Blogger not Wordpress, because Wordpress already has a calender widget.. So lets do this...

1- Add/Install Archive calendar on your Blog

To do this:

Go To Blogger Dashboard > Layout
In Blogger's default widget directory, after clicking on Add Gadget just choose "Blog Archive widget *You may need to switch to next page in the directory to find it.

Configure the options (as shown in the screenshot blow).

Set style to Flat list.

Uncheck "Show Oldest Posts First".

choose archive Frequency as Monthly and Date Format should be set to anything.

Then Click save.

2- Go to Blogger Dashbord > Settings > Template (Don't forget to Backup your template). After that click on Edit HTML > Proceed

Then find the following code (with Ctrl + F):

If you couldn't see the code, then search for BlogArchive, (you will find a code similar to the one shown above).

3- Replace the above code in step#2 with the following code:

<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'>      </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>    <thead id='bcHead'></thead>      <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'>    </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- Now search </head> and paste the following lines of code above it:

<script type='text/javascript'>  //<![CDATA[  <b>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"]; </b>// 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&alt=json-in-script&callback=timezoneSet'></script>

Note: Look at the above code (at the beginning), starting from

var bcLoadingImage = "http://mybloggertricks.googlecode.com
to
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; that is where you can change the text "View Archive", loading image, ASCII characters for navigation arrows and change the abbreviation for Day names.

Customizing the widget:

As you may observed (if you've already saved your tempelate), the widget will look dull, until you do some styling and customization by adding colours.. Now,

Search for ]]></b:skin> (inside the template box), and just above it paste the following css codes:

1* Use this code (If you are using a lighter theme with white background):

#calendarDisplay {display:none;}  /* div that holds calendar */  #blogger_calendar { margin:0px auto 0px 0px;width:100%;}  /* Table Caption - Holds the Archive Select Menu */  #bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}  /* The Archive Select Menu */  #bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;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:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}  /* The calendar Table */  table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}  /* The Cells in the Calendar */  table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}  /* 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:#ffffff; text-decoration:none;}  table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}  /* First Row Empty Cells */  td.firstCell {visibility:visible;}  /* Cells that have a day in them */  td.filledCell {  background:#fff;}  td.filledCell:hover {  background:#dddddd;}  /* Cells that are empty, after the first row */  td.emptyCell {visibility:hidden;}  /* Cells with a Link Entry in them */  td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}  td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}  /* Table Footer Navigation */  table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}  table#bcNavigation a:link {text-decoration:none;color:#0080ff}  table#bcNavigation a:hover{text-decoration:underline;}  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 {}

2** use this code instead (If you are using a Dark template with black background or similar):

Dark Archive Calendar

/* Start of Post Navigator by MBT (DARK Theme) ------ */  #calendarDisplay {display:none;}  /* div that holds calendar */  #blogger_calendar { margin:5px 0 5px 10px;width:98%;}  /* Table Caption - Holds the Archive Select Menu */  #bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}  /* The Archive Select Menu */  #bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;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 #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}  /* The calendar Table */  table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}  /* The Cells in the Calendar */  table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}  /* 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:#ffffff; text-decoration:underline;}  table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}  /* 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:#000000;border:1px solid #666666}  /* Table Footer Navigation */  table#bcNavigation  {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}  table#bcNavigation a:link {text-decoration:none;color:#F5F202}  table#bcNavigation a:hover{text-decoration:underline;}  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 {} /* End of Post Navigator by MBT (DARK Theme) ------ */

More Customization for LIGHT theme:

To change text color in blue edit 0080ff
To change background color of the cell with blue background in active mode edit 53A9FF
To change the cell colour in mouse hover mode edit 72B9FF

More Customization for DARK theme:

To change color of the yellow text edit F5F202

Finally save your template and check your blog.. CONGRATS!

Archive Calendar Widget For Blogger

No comments :

Post a Comment

Popular Posts

Blog Archive

Labels

Labels