Archived Post: Showing Headlines by Labels

Important Update: Labels now suppose to support unicode label. Please give it a try.

***

Dear Friend,

I have a pretty long "grown-up Xmas" list, and in term of Blogging hacks, one of my wish is to find time to continue hacking with the new JSON format :-))) (Just kidding).

After struggling for two weeks, here is the first of many more JSON hackings to come: a "Contents by Category" widget.

This is what it looks like on the side bar:

And with a simple drag-n-drop (that's how I love the new Blogger!) here it is on the main column:

Of course with some simple CSS twists you could make it looks more fancier, if you wish.

To install, first follow the instructions from this article Hacking Technique: How To Modify a 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 with the installing part.

<b:widget id='HTML50' locked='false' title='Contents By Category' type='HTML'>
<b:includable id='main'>


  
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>

  <div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>

var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
"3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];

// Given a json label search, this function return the decoded label.
function getLabelFromURL(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
}

function listEntries2(json) {
  var ul = document.createElement('ul');

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = alturl;

    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
  }

  for (var l = 0; l < json.feed.link.length; l++) {
    if (json.feed.link[l].rel == 'alternate') {
      var raw = json.feed.link[l].href;
      var label = raw.substr(homeUrl2.length+21);

var label = getLabelFromURL(json);
      var txt = document.createTextNode(label);
      var h = document.createElement('h4');
      h.appendChild(txt);
      var div1 = document.createElement('div');
      div1.appendChild(h);
      div1.appendChild(ul);
      document.getElementById('data2006').appendChild(div1);
    }
  }
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i < labels.length; i++)
  if (labels[i])search2(homeUrl2, labels[i]);
</script>
  </div>

  <b:include name='quickedit'/>

</b:includable>
</b:widget>

Now, those settings in bold are for my blog! So, if you would like to do some free advertisements for me, then I wouldn't mind :) But I guess not.

To change the code to your blog, along with the listing of your featured labels/categories, modify the bold texts below in the code:

var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
"3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];

The second line is actually an array, separated by commas, and inside the double quotes. Replace those with yours, and feel free to add more if you like.

Until next time,

Hoctro
12/13/06

Thanks.

***

Update:

1/17/07: Fixed bug of labels not having the right child posts. A new div will make sure the label header and its posts stays in one place.

      var div1 = document.createElement('div');
      div1.appendChild(h);
      div1.appendChild(ul);
      document.getElementById('data2007').appendChild(div1);