Beauty of Mathematical Curiousity

After scouting around a bit, I found a post on creating labels for classic blogs. It was just what I was looking for. I snagged the code, tweaked it a bit, and had a working label list. Here is the original javascript label list:

<div id="labelList"></div> <script type="text/javascript">

//<![CDATA[

function listLabels(root){
    var baseURL = '/search/label/';
    var baseHeading = "Labels";
    var isFTP = false;
    var llDiv = document.getElementById('labelList');
    var entry = root.entry;
    var h2 = document.createElement('h2');
    h2.className = 'sidebar-title';
    var h2t = document.createTextNode(baseHeading);
    h2.appendChild(h2t);
    llDiv.appendChild(h2);
    var ul = document.createElement('ul');
    ul.id = 'label-list';
    var category = entry.category;
    labelSort = new Array();
    for(p in category){
        labelSort[labelSort.length] = [category[p].term];
        }
    labelSort.sort();
    for (var r=0; r < labelSort.length; r++){
         var li = document.createElement('li');
         var a = document.createElement('a');
         if(isFTP){
             a.href = baseURL + encodeURIComponent(labelSort[r])+'.html';
             }
         else {
             a.href = baseURL + encodeURIComponent(labelSort[r]);
             }
         a.innerHTML = labelSort[r] + ' ';
         li.appendChild(a);
         ul.appendChild(li); 
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
         } 
    llDiv.appendChild(ul);
}
//]]>
</script>

<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>

The source for this code is found here. I recommend taking a look, as both the post and the comments are helpful. As I said, I made a few tweaks as I was typing the code into my blog. I already had my own label, so I skipped that part entirely. I also left out giving an id to the label list. I just didn't see a need, as my css already handled the list in a general fashion (and I was happy with the result). I also added in a <noscript> tag, to cover those that don't have javascript enabled. Other than that, I basically used it as-is. At first, I simply didn't understand the mumbo jumbo at the end, where the second script tag calls a source. Here is my revised version:

<div id="labelList"></div>
<noscript>Sorry, labels are available only with javascript enabled.</noscript>
<script type="text/javascript">
//<![CDATA[

function listLabels(root){
  var baseURL = '/search/label/';
  var baseHeading = 'Labels'; 
  var isFTP = false;
  var labelDiv = document.getElementById('labelList');
  var entry = root.entry;
  var ul = document.createElement('ul');
  var category = entry.category;
  labelSort = new Array();
  for(p in category) {
    labelSort[labelSort.length] = [category[p].term];
  }
  labelSort.sort();
  for( var r=0; r < labelSort.length; r++){
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = baseURL + encodeURIComponent(labelSort[r]);
    if(isFTP){
      a.href = a.href + '.html';
    }
    a.innerHTML = labelSort[r]+'';
    li.appendChild(a);
    ul.appendChild(li);
    blank = document.createTextNode( '' );
    ul.appendChild(blank);
    }
  labelDiv.appendChild(ul);
  }
//]]>
</script>

<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>

But I did mention I'm a bit picky, right? Well, it may seem as though I found satisfaction, but this script, combined with the provided tags for classic blogger soon sparked my imagination and drive for control.

Labels: blog, classic blogger, feeds, html, javascript,

Comments