As promised, here is the second part of my findings about the out-of-the-box Archive widget.

The widget I am offering you is called the "Related Articles" widget. Think of it as a simple labeling system, independent of the new Blogger's label feature.




As you view an item page, the menubar will show all similar posts that share the same category as this title, dynamically. Just like my horizontal tab hack, once you have the system set up, the related posts will automatically showed up, you don't have to do a thing. However, to make this work, you need to do a little upfront work, by re-label your titles with your category at front, in sigular form, following with a "colon" character, i.e.,

Blogger Hack: Related Articles Widget

The good news is, you don't have to label all of your posts at once to make this hack fully work, you could re-label them at your own pace. Also, you could make use of the label's Show all feature (in editing page), click it, and cut-and-paste the relevant label to the front of your post. You can see now that all of my posts use this new labeling system.

To be fair, the hack came after I re-labeled all my posts' titles. At first, I always want to have some sort of short identification of what the title is about: hacking, musings, news, etc. just by glancing at the "listing of contents" hack. I think my readers would also greatly benefited from this, where he or she know right away that a real hack is going to be presented, or this post is just about some blah-blah-blah musings :)

Having a categorized title make it faster for a reader to choose what to read.

Then, I realize I could use some JavaScript to detect the presence of these labels and comparing to see if any of them match with the first part of the current post title. If there is a match, the relevant post is added to the related list, if not, nothing happens. A new hack is born.

To install this hack is very simple. First, follow the instructions from this article entitled "Hacking Technique: How To Modify a (Beta) Template", in particular section B.4. Then cut this code below and paste it in between any two "b:widget" tags, save the template, and you're done.


<b:widget id='BlogArchive2' locked='false' title='Related Articles' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:title'>
    <h2 id='relatedTitle'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='RelatedPosts'>
  <div expr:id='data:widget.instanceId + "_ArchiveList2"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <ul id='relatedArticles'><b:include data='data' name='interval'/></ul>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>

<script language='JavaScript' type='text/javascript'>
// 'Related Article' hack by Hoctro - Nov 2006 http://hoctro.blogspot.com
// Some rights reserved - 2006

//Cross browser event handling written by Scott Andrew
function addEvent2(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
  }
  else {
    elm['on' + evType] = fn;
  }
}

function copyNodes2() {
  var ele = document.getElementById('relatedArticles').cloneNode(true);
  var aList = ele.getElementsByTagName('a');
  var atext = "<data:blog.pageTitle/>";
  var arr = new Array(3);
  arr = atext.split(":",3);
  var related = document.getElementById('relatedArticles');
  var relTitle = document.getElementById('relatedTitle');
  relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " about " + arr[1] + 's'; 
  while (document.getElementById('relatedArticles').hasChildNodes()){
document.getElementById('relatedArticles').removeChild(document.getElementById('relatedArticles').firstChild);
  }
  var listLen = aList.length;
  for (var j=0;j &lt; listLen;j++){
    var txt = aList[j].firstChild.nodeValue;
    var sarr1 = arr[1].substr(1, arr[1].length-1);
    if(txt.search(sarr1) != -1) {
      var litxt = document.createElement('li');
      txtNode = aList[j].cloneNode(true);
      litxt.appendChild(txtNode);
      related.appendChild(litxt);
    }
  }
}
// Load event to run our script
addEvent2(window, 'load', copyNodes2, false);
</script>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
    <b:loop values='data:posts' var='i'>
      <a expr:href='data:i.url'><data:i.title/></a>
    </b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
  </b:loop>
</b:includable>
</b:widget>


Here is the result, where I strategically locate the hack near the title of the item post so the reader could recognize and read the related titles. Also notice this hack only works on item post pages, where only the "feature post" is displayed.



I hope you will find this hack useful.