Automatic List of Labels for Blogger Classic Templates

some bloggers might not know what's the difference between classic blogger template and new blogger template. if you wanna know whether you are using classic blogger template or new blogger template, try login to blogger, you'll be directed to the dashboard. you'll see that there's 4 links under your blog title.

if you saw "Edit Posts – Settings – Template – View Blog", you are using classic blogger template; or if you saw "Edit Posts – Settings – Layout – View Blog", you are using new blogger template.

as mentioned in the title, this tutorial is for blogs that are using classic blogger template.

to add the label feature to your blog like what you saw here, there's two pieces of information that you have to get, blog ID and user ID. both of these you can get via your dashboard.

1. for the user ID, click on the 'view profile' link and it's the long number at the end of that url.

2. for the Blog ID number, again from the dashboard if you click on any links to change settings or create a post for that blog, all links will have blogID=xxxxx at the end where the x's will be that particular blog's ID number.

here is code that will fetch and display the labels for your blog:

<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>

3. put the codes shown above to the section where you wanna display the labels.

4. replace the USERID and BLOGID that highlighted in the codes with your own user ID and blog ID.

for example:

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

one more step to go!

5. paste this codes at your CSS section, in between <style> and </style>.

#labelList {}
ul#label-list {text-align:justify}
ul#label-list li {display:inline;}

you can now save your template~~~

source: phydeaux3