Archive Calendar Widget For Blogger - 2 Themes

archive calendar

You guys needed more tutorials? There we go with yet another unique and interesting hack for blogger Archive Widget. You can see at our sidebar area that the default BlogSpot archive widget is transformed into a Wordpress Type Archive calendar with custom styles and flavors. The easy script and stylesheet today will enable you all to create a calendar archive gadget for your blogs using MBT's custom style sheets for Dark and Light backgrounds. The script is coded by phydeaux3  and redesigned by MBT with custom colors and more easy installation. The plugin has been made compatible and easy to implement. Just follow the basic steps below.

UPDATE: The widget is working perfectly with all blogger templates. For those who are facing errors make sure you are following step#6 correctly. Also don't forget to add CSS styles.

Install Archive calendar on your Blog

  1. Go To Blogger > Layout
  2. Chose Blog Archive widget which is available in Blogger's default widget directory. Switch to next page in the directory to find it.

    blog archive gadget

  3. Choose the following options as shown in the screenshot. Choose style as Flat list. Uncheck "Show Oldest Posts First", choose archive Frequency as Monthly and Date Format can be set to anything.

archive settings

    4.  Click save

    5. Now go to Blogger > Settings > Template. Backup your template and then click Edit HTML > Proceed

     6. Click Jump to widget  and then select BlogArchive1

jump to blogarchive1  

select the entire code as shown below

blog archive

        7.   Next replace the entire code above starting with <b:widget and ending with </b:widget with the code 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>

 

   8.  Now search </head>   and just above it paste the following lines of code:

<!-- Blogger Archive Calendar by  www.MyBloggerTricks.com -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTXCUYbkRD6WC6Kq2Dp3eC1A_7zBFiER_wxP-3nWyV6f-jgmzjWU-e9p3ob1XF4YJPVvM1maFK2BK_sG9xuOwlBP1oESvLSXDT7sw3AmW16yXV2a165kumL0eMZDfQSO6P6Nio_3Iyog/s400/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  -->

Optional: The yellow highlighted region is where you can change the text "View Archive", loading image, ASCII characters for navigation arrows and change the abbreviation for Day names.

   9. Save your template and you are almost done!

Add Styles

The widget will look dull and grey unless you style them by adding colours. Do this:

  1. Search inside the template for ]]></b:skin>   and just above it paste the following css codes respectively:

 

If you are using a lighter theme with white background then use this code:

Light Archive Calendar

/* Start of Post Navigator by MBT (LIGHT Theme) ------ */
#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 {}

/* End of Post Navigator by MBT (LIGHT Theme) ------ */

If you are using a Dark template with black background or similar then use this code instead:

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) ------ */

Customization for LIGHT theme:

  • To change text color in blue edit  0080ff  Use our Color Generator Tool
  • 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

Customization for DARK theme:

  • To change color of the yellow text edit F5F202 

 

   2.   Finally save your template and you are all done!

Visit your blogs to see the Archive gadget transformed into a beautiful Calendar. :)

Need help?

The widget can be further customized and is fully editable. If you needed any further help just let me know. I hope this new method may add new spice to your free blogger layouts and give it a more professional Design touch. I hope you find it useful.

Don't you think the widget loads extremely fast and can attract visitors more thus leading to higher page views? Do let us know of your precious views. Peace and blessings buddies! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

71 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Grt Work. Though I dont need this now but still this is an innovative one . :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. fewww After a long long long long long long time i am again almost the first one to comment just because Mustafa Bhai came back with a Bang ;)

    Really loved this Widget :)

    ReplyDelete
  4. Wow thanks for the tutor i like it very much. It suitable with my new blog design. I'm always wait for your new tutorial.

    ReplyDelete
  5. Woah!, I Saw this widget today on MBT and was thinking that today this article is coming and exactly that Happened. I Think It might Slow down Speed of our Blog. Don't you think it has lots of Jquery :). Other than that, Too Good. Peace

    ReplyDelete
  6. greet work mohammad, I'm big fan of you. I meet with you personally nice work ever and i have intrust in computer, blogging i always read your articals and i make a blog http://shakeelasghar.blogspot.com/
    check this bro

    ReplyDelete
  7. Awesome work !! you done a great job..anyway happy to see you back from long time.

    Tricksandteach.com

    ReplyDelete
  8. Great post again! Its nice to see you back.

    theyellowbulb.blogspot.com

    ReplyDelete
  9. Isn't it that Blogger by default adds that JavaScript when we add the widget. I try to stay away from JS as much as possible.

    ReplyDelete
  10. Woah! I Saw this widget on MBT and was Thinking that Mohammad Bro will be sharing it today, And Exactly that Has Happened. Its a great invention buddy. However, It Effect Site Speed a lot. It has lots of Scripts (JAVASCRIPT) which really reduces the Speed.

    MBT Google Speed Were 89.But Now Its 84 (You ca See the Difference)

    Any Ways, Really Awesome Looking Themes

    ReplyDelete
  11. THANKS...

    I LYK TO ASK ONE DOUBT NOT IN THIS SECTION

    WHEN WE ARE CREATING MENUS IN BLOG( you said TAB1,TAB 2 etc)
    can you tell how to link my post in to TAB1.1 or TAB1.2

    THNKS IN ADVANCE

    ReplyDelete
  12. thanks for the tutor i like it very much.

    ReplyDelete
  13. Highly technical article but easy to follow every step given it. Thanks for sharing

    ReplyDelete
  14. input complete step.6 & step.7 than view that problem
    The element type "b:section" must be terminated by the matching end-tag "". so what will i do? plz plz help me.

    ReplyDelete
  15. Nice gadget. Thanx a lot man! One hiccup tho...the calendar is listing as well the names of my non-published posts. How do I take care of that technicality? Any help will be much appreciated.

    ReplyDelete
  16. Wow Thank you !
    www.protricksz.blogspot.com

    ReplyDelete
  17. nice bro you are really genius..

    dowloads books here
    www.book24u.blogspot.com

    ReplyDelete
  18. Salam brother:

    Again it was superb in fact it worth more than million dollar.... The best thing is that you have simplify the process so beautifully even a new blogger can easily understand.

    Brother if you can improve the copying code process it would be more easy to copy. I mean 1 click for selection of code and than copy..You must aware of it mostly we watch click here to highlight the code and copy it.

    Thank you so much for this gift

    ReplyDelete
  19. @Rounak
    Install it now. it helps! =p


    @haider
    Yes always ahead Mr. haider. Lets see if you can beat faizan and Ahmed safwan in commenting first :p

    @Mrie
    A pleasure buddy. I am glad it suits your new design. :)

    @Faizan

    The jquery is installed on blogger template itself with an external link and so far the widget is really fast at loading. 84 and 89 are still small differences and are acceptable dear. Of course with a change the rankings would differ a little. But did you experience any slow loading of MBT after we installed it?

    @shakeel
    I would love to meet you too. Please stay tuned for our announcement of the second event this week. Venue and details will be shared on our fan pages. :)

    @sunil
    Happy to see you too dear brother. Most welcomed. :)

    @debbie
    Thank you debbie. Glad to see you active at MBT again. Feels great :)


    @rajkumar
    a pleasure buddy :)

    @bhavesh
    the above is not too deep a java-script. The server load time is acceptable. So far the widget functions well enough. Try it once champ. :)


    @SR
    My pleasure SR. Glad you liked it. =)

    @stock
    Thank you stock :)


    @Premjith
    Buddy we have several tutorials on this topic. Search any of our Drop down menus, you will find the guide to add links to tabs.

    You juts need to add your link inside the href parameter and add the text before the closing a tag like this:

    <a href="Add-URL-here">TAB TITLE HERE</a>


    Hope this helps :)

    @rahul @abu
    my pleasure buddy :>

    @hammad
    Glad to see you too hammad. Always Welcomed pal :)


    @rehman @akhil @Mi Muba
    A pleasure buddies. Glad you liked it :>

    @md.

    I guess you have missed copying the last line in the code of step#7. Please add it again and let me know. :)






    ReplyDelete
  20. @actuary

    Showing names of non-published posts? Not possible because the widget can show no drafts but published blog posts. Please share your blog link buddy. :)


    @jin @jons

    Thank you pals for finding it useful :)

    @Muhammad
    W.salam buddy,

    I am glad you found it so useful. Means a lot.
    We avoid Syntax highlighter for SEO in the past and I guess we should start using it now.

    Another shortcut is to click the first line of code, then keep pressing Shift key and scroll down and then left click at the end of the code (releasing the shift key) to copy it all.

    :)

    @stamfort
    Thanks for visiting. :)

    ReplyDelete
  21. @Mohammad Bro,

    To Be Honest, I am not on a High Speed internet its 512 KBPS and its not a Super Fast Connection. So MBT Usually Takes a While to Load for me at least. I Think you should do a POll asking from readers for the site speed. Peace.

    ReplyDelete
  22. Always with new innovations, Mohammad and MBT team, thumbs up, this come at a very good time, I am doing restructuring of my blog I think this will fit in well. Welldone bro.

    ReplyDelete
  23. Gr8 work. Appreciated. i am also using the same theme for my blog. i think you have missed out something in the hack is to display the YEAR. i think the widget should show the years too. if you fix that kindly let me know so that i can fix mine too.

    ReplyDelete
  24. Thank you very much brother! Cool work...This helped me alot !
    give my blog a visit : http://www.facebooktimelineapp.com

    ReplyDelete
  25. Nice work bro.....thx for this gr8 tutorial...

    ReplyDelete
  26. How can I increase the width of the widget, tried editing the 20px in the CSS code but it doesnt help, help reply this

    ReplyDelete
  27. this is a nice widget and i like.. but WARNING !.. i have an bad experience. i just share.
    after i use this widget on my blog. this is generate many duplicate description that made my blog SERP down. my visitors down about 70% one day after i use this widget. i am searching to many blogs for search how to fix and what the reason. all answer it same that archive is make duplicate description. maybe it is reason search engine down my SERP. it is because the archive indexed and it have no special description for it pages so the each of page archive use homepage description. i see it on webmaster tools that display many duplicate description, missing title, and duplicate title caused by archive. i am not mean to blame this post or writer. but i just share my experience.
    the ways to fix this problem is by add meta code :"<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta content='noindex,noarchive' name='robots'/>
    </b:if> .. (it is said a professional blogger and it work).. so i just tell you to be careful if want to use this widget.. Thanks. my blog that the SERP down : www.blogberbagi.com. please response this comment !

    ReplyDelete
  28. this widget also highlight a date on which date we dony published any post and when we put mouse on it , it displays posts in draft , draft posts should never seen by visitors , please help to solve it
    Allah Hafez

    ReplyDelete
  29. Hi,
    Thanks for sharing this...I've repeatedly tried installing it, but I get the following error message "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag ""."
    Any Idea? thanks in advance...

    ReplyDelete
  30. great article that is it helped me alot
    your blog is awesome brother
    i am learning many things from this blog
    keep it up!

    ReplyDelete
  31. I'm running into the same problem as: md. hedayetullah on 10:30 PM, October 11, 2012 said... # 22
    input complete step.6 & step.7 than view that problem
    The element type "b:section" must be terminated by the matching end-tag "". so what will i do? plz plz help me.




    ReplyDelete
  32. Assalammualaikum brother!..

    Thanks for your great widget. I have tried this widget on my blog (http://waazin.blogspot.com). Unfortunately, my scheduled post also "archived" or highlighted in the calender.

    As a result, when we click for tomorrow or day after tomorrow or any advance schedule post dates, the result is "No posts match your query. Show all posts". The post is not appear because it's not yet scheduled to published.

    Please help. Thank you.





    ReplyDelete
  33. is there anz arhive widget for blogger with diferent look?

    ReplyDelete
  34. Assalamualaikum
    Syukron! :)


    www.trigonalworld.com

    ReplyDelete
  35. Great. What about an Html and javascript version so as one can input directly when designing a site. This is especially for users using artisteer 4

    ReplyDelete
  36. Hello there,
    I'm using code Archive Calendar Widget For Blogger - 2 Themes, but I'm having problems please please help me with this.
    UK Web: http://giadinhgieogiong.blogspot.com/
    bottom: View Archive
    it every three new posts, and when the load 19, it appears 19 posts at the bottom of the View Archive. Would you please just make it hidden?
    Thank you very much. Please send me email:
    beten28@gmail.com

    ReplyDelete
  37. hey guys,
    fixing the "display the year" issue is super simple: on step 3, where you select "monthly" as frequency, also make sure that on "date format" you select the month next to the year, and there you go! You can see it working at http://maxkrovenreviews.blogspot.com/

    ReplyDelete
  38. I am having the same problem as #22 and #42.

    ReplyDelete
  39. I found one main problem with this widget. and I think the solution lies in its javascript code. Kindly help to clear it out.
    The calendar dates wont highlighted when you post your articles by selecting any past date or time. and when the calendar dates doesnt highlight, then we cannot get the link attached to that day.

    ReplyDelete
  40. What an Awesome Widget...!!!
    JazakAllah...!!!
    http://tension-nae-leni.blogspot.com/

    ReplyDelete
  41. For everyone having issues with the b:section error that pops up. Look at the code to replace in step 6. If your coding in your template doesn't have a / backslash at the end of it, you have to highlight the code all the way down to the first "</b:widget>" you see. Then replace all of that highlighted coding with the coding in Step 7 and it should work.

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. Hi, first of all thanks for sharing, I love this one.
    I've installed it in one blog (working perfectly) and than in a second blog, on which all post titles are showing up under the calendar...any idea on how to fix this?
    Thanks in advance :)

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. How can I change the first day of the week? Because I wanna start with Monday. And how can I delete this: (10)? The: (number of blogposts)? I wanna have the month and year shown. But not clickable. Like this: http://i43.tinypic.com/2qn5wg9.jpg

    ReplyDelete
  46. Sir..It is only showing the archive of 2012 posts...It is not showing the posts of 2013..Please help

    ReplyDelete
  47. hello ^_^
    You could make the added display box ..( width:300 )??

    ReplyDelete
  48. Thank you for this my friend

    ReplyDelete
  49. When I point the month in the dropdown arrow the hover color becomes grey and the fonts remains black. But once I select the month, the font color becomes white and the hover color changes to #0080ff. Where should I change this #0080ff so that I can choose what will blend with my blog color.

    Thanks for the help.

    ReplyDelete
  50. I am having two problems. I must be missing something but I can't change see or change the color of the calendar.

    Also, somehow I see a list of all the blogposts below the calendar. They are listed by the month (ie all of Feb). Is there anyway to hide the list and just show the calendar.

    tomperloff.blogspot.com

    ReplyDelete
  51. How to solve the error that is in the brackets
    ( Error parsing XML, line 2537, column 5: The element type "b:section-contents" must be terminated by the matching end-tag "" )

    ReplyDelete
  52. I'm having the same problem.
    Could not load template preview: Error parsing XML, line 2811, column 5: The element type "b:section-contents" must be terminated by the matching end-tag ""

    ReplyDelete
  53. Thanks a lot, you are the best, thanks again

    ReplyDelete
  54. Hi Mohammad! I follow your steps but the numbers don't display in the cells. Please help! Thank you!

    ReplyDelete
  55. This plugin is working perfectly. I have simplified the steps in step#6 so to make things even easier. enjoy! :)

    ReplyDelete
  56. Bhai,

    This an awesome widget, very stylish and light. I have a small problem though, since I have a general open Target Blank condition in my blog the widget opens in a new window always. I want the posts to open in the native tab/window itself. Kindly let me know where I can include the target='_self' in the widget. I am zero in coding.

    Thanking you.

    ReplyDelete
  57. http://www.filologos-hermes.info/


    UNDER the calendar it shows my months post... what i ve done wrong?

    ReplyDelete
  58. Any way to paste this calendar code to only be seen on 1 dedicated page instead of all as a widget? Id like to use this but like a contact form I only want it visible on 1 page instead of all in sidebars or footers.

    ReplyDelete
  59. Very nice widget but unfortunately does not show more than 500 posts...
    I have more than 40.000 posts, so i suppose i'll stick with the old style version...

    ReplyDelete
  60. NICE BUT IT SHOWS ONLY 4 DAYS ARCHIVE ONLY. HOW TO SHOW ALL ARCHIVE?

    ReplyDelete
  61. Hello, SIr let me ask you.. I input this plug-in to my blog which is http://www.cutepinoyportal.com/ and int was perfectly fine..

    But when i checked my friends blog , why is that , it has a list of titles below the calendar and mine is not working... here is my friends blog http://www.runningatom.com/

    Is there any missing script that I forgot to input?

    ReplyDelete
  62. Good job, i have done this on my blog, thank's for shearing

    ReplyDelete
  63. thanks..its really good archive widget

    ReplyDelete
  64. Hello, fistly thank you for making this post. This is a really good widget however it shows my new drafts (though when the day clicked it show no post, but the calendar still highlight the date and show the title draft when hovered). Weird enough it doesnt seems shows the old ones.... Ive done what the instructions told me, I only change the colors and nothing more. Can you help me?

    ReplyDelete
  65. .
    Sir, may i ask: Is there a way by which we can date the archive by 1) Month and 2) Year also too?

    ReplyDelete