Monday, September 7, 2009

Labels widget for Blogger Classic Template


Problem: How to generate an automatic listing of labels in Blogger Classic template?
Solution: Add the following code to the side-bar where you want the labels:
<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-inscript&callback=listLabels"
></script>
Remember to change USERID and BLOGID in the final line with the actual values for your blog. The USERID of your blog is the number on the url on your profile page and the BLOGID is the number on the url on any of the settings/posting/layout pages - all of which can be accessed from your blog's dashboard. You also need to set the baseURL variable to the path (I recommend http://blogurl path instead of the server path) to the labels folder in your blog and set the variable isFTP to true if you publish using FTP.

For a very detailed solution (and the actual source) see: http://phydeaux3.blogspot.com/2007/05/automatic-list-of-labels-for-classic.html

No comments:

Back to Top


 

Labels