- Blog
- Website
- Articles / Tutorials
- Links
- Hire me
- Contact / Requests
- Advertise
- Review
Tutorial: Displaying list of labels on your blog
Blogged by:
Kitty on
Tuesday, September 13, 2011
Facebook comments: comments
In this tutorial, I'll be showing you how to display your all the labels (or tags) in your blog. The technique will be making use of Javascript and the labels will be displayed as a list..
Note: Always, always remember to backup your HTML codes before making any changes to it.
Step 1
Open up your Blogger Dashboard and go to where the HTML editor is.
Step 2
Copy the following codes and paste them where you want them to appear.
<div id="labelList"></div> <script type="text/javascript">
//<![CDATA[
function listLabels(root){
var baseURL = '/search/label/';
var baseHeading = "Categories";
var isFTP = false;
var llDiv = document.getElementById('labelList');
var entry = root.entry;
var h1 = document.createElement('h1');
h1.className = 'sidebar-title';
var h1t = document.createTextNode(baseHeading);
h1.appendChild(h1t);
llDiv.appendChild(h1);
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>
Now, there are things that you need to take note of. Let's take a look at them one by one.
Look for the h1 tags in the codes. They are the tags for the heading and in the codes above, you can find them occurring a few times. You can replace the h1 tags with h2 or h3, etc.
Then look for this piece of code:
var baseHeading = "Categories";
You can change the word Categories to any text you like. For example you can change it to labels, tags, etc.
Next, watch out for this code:
<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>
You will need to replace the words USERID and BLOGID with your own userID and blogID.
Save your progress and it's done.Labels: displaying labels, tutorial
Related Posts:
Comments to Tutorial: Displaying list of labels on your blog:
I posted this code in a page on my blog. It works great when viewed by PC, but will not show when viewed via mobile. Any idea why?
It seems to be something to do with the callback script not running its function. It runs fine on my PC & Mac, but not the iPhone.
If I swap out the
script src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels"
with the actual source of the script found at that URL, it all works fine, but is of course now static and relies on me manually updating when I add new labels.
Any thoughts as to why this might be happening?
@Tamara, you can find your userID in your profile page. Look at the address bar in that page which looks something.
Example: http://www.blogger.com/profile/00729941953368466792
The numbers 00729941953368466792 would be the userID.
got it, thanks :D
"Look for the h1 tags in the codes. They are the tags for the heading and in the codes above, you can find them occurring a few times. You can replace the h1 tags with h2 or h3, etc."
>> when I replace the h1 tags, the labels don't appear. they only appear if I put h1 tags. why and how to fix this?
Make sure you have changed all h1 tags in the codes. They appear in these lines:
var h1 = document.createElement('h1');
h1.className = 'sidebar-title';
var h1t = document.createTextNode(baseHeading);
h1.appendChild(h1t);
llDiv.appendChild(h1);
Hi kitty, I followed your instructions but it worked not quite well. The Labels appear only when I'm signed in. Thus, they disappear when I'm signed out, and it probably won't appear publicly. This there's any solution to this?
Hi Kitty, I have the same problem as anonymous. The labels show up fine when I'm signed in. However, they disappear when I'm signed out and others can't see them either.
Hello, i have the same problem as above.
Only can view the labels when signed in. But unable to view the labels after signing out :( any idea how to solve it?
Hi there Kitty, here is a better straight way to do it:
http://jsfiddle.net/tovic/4sm4R/
thanks for your help
@David, thank you for the link. Indeed it's a better and shorter way to do it. :)
Hun you really should think on updating your post with that one, since you are one of the top ranked in google when looking for that solution.
Facebook comments to Tutorial: Displaying list of labels on your blog:
Tutorial: Displaying list of labels on your blog
Blogged by:
Kitty on
Tuesday, September 13, 2011
Facebook comments: comments
In this tutorial, I'll be showing you how to display your all the labels (or tags) in your blog. The technique will be making use of Javascript and the labels will be displayed as a list..
Note: Always, always remember to backup your HTML codes before making any changes to it.
Step 1
Open up your Blogger Dashboard and go to where the HTML editor is.
Step 2
Copy the following codes and paste them where you want them to appear.
<div id="labelList"></div> <script type="text/javascript">
//<![CDATA[
function listLabels(root){
var baseURL = '/search/label/';
var baseHeading = "Categories";
var isFTP = false;
var llDiv = document.getElementById('labelList');
var entry = root.entry;
var h1 = document.createElement('h1');
h1.className = 'sidebar-title';
var h1t = document.createTextNode(baseHeading);
h1.appendChild(h1t);
llDiv.appendChild(h1);
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>
Now, there are things that you need to take note of. Let's take a look at them one by one.
Look for the h1 tags in the codes. They are the tags for the heading and in the codes above, you can find them occurring a few times. You can replace the h1 tags with h2 or h3, etc.
Then look for this piece of code:
var baseHeading = "Categories";
You can change the word Categories to any text you like. For example you can change it to labels, tags, etc.
Next, watch out for this code:
<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>
You will need to replace the words USERID and BLOGID with your own userID and blogID.
Save your progress and it's done.Labels: displaying labels, tutorial
Related Posts:
Comments to Tutorial: Displaying list of labels on your blog:
I posted this code in a page on my blog. It works great when viewed by PC, but will not show when viewed via mobile. Any idea why?
It seems to be something to do with the callback script not running its function. It runs fine on my PC & Mac, but not the iPhone.
If I swap out the
script src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels"
with the actual source of the script found at that URL, it all works fine, but is of course now static and relies on me manually updating when I add new labels.
Any thoughts as to why this might be happening?
@Tamara, you can find your userID in your profile page. Look at the address bar in that page which looks something.
Example: http://www.blogger.com/profile/00729941953368466792
The numbers 00729941953368466792 would be the userID.
got it, thanks :D
"Look for the h1 tags in the codes. They are the tags for the heading and in the codes above, you can find them occurring a few times. You can replace the h1 tags with h2 or h3, etc."
>> when I replace the h1 tags, the labels don't appear. they only appear if I put h1 tags. why and how to fix this?
Make sure you have changed all h1 tags in the codes. They appear in these lines:
var h1 = document.createElement('h1');
h1.className = 'sidebar-title';
var h1t = document.createTextNode(baseHeading);
h1.appendChild(h1t);
llDiv.appendChild(h1);
Hi kitty, I followed your instructions but it worked not quite well. The Labels appear only when I'm signed in. Thus, they disappear when I'm signed out, and it probably won't appear publicly. This there's any solution to this?
Hi Kitty, I have the same problem as anonymous. The labels show up fine when I'm signed in. However, they disappear when I'm signed out and others can't see them either.
Hello, i have the same problem as above.
Only can view the labels when signed in. But unable to view the labels after signing out :( any idea how to solve it?
Hi there Kitty, here is a better straight way to do it:
http://jsfiddle.net/tovic/4sm4R/
thanks for your help
@David, thank you for the link. Indeed it's a better and shorter way to do it. :)
Hun you really should think on updating your post with that one, since you are one of the top ranked in google when looking for that solution.
Facebook comments to Tutorial: Displaying list of labels on your blog:
Hire me to design your blog!
I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.
The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.
How to place your order
Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.
Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank
I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.
Payment methods
Payment has to be made to either by PayPal, or Moneybookers.
However, if you choose to pay via (international) bank transfer, be aware that you may be charged for the transfer service.
Other important information
Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.
Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.
I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.
All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.
The designer
Kitty. 29. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.
I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.
The website
This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.
Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.
Categories/Labels
Past layouts
These are the layouts that have been used on Codeislove.net previously.
Layout #1
Layout #2
Layout #3
Articles, Tutorials and Contests
Articles
Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Tutorials
Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Popular tutorials:
Converting HTML layout to Wordpress series:
How to code Classic Blogger template series:
Other tutorials:
Contests
Linkages
On-site navigation
Network
Looking for money-making opportunities? Check out these websites.
Contact the webmistress
You can email me your messages/tutorial requests using the contact form:
Advertising
Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.
Simple site statistics:
Monthly Unique Visitors: 5000+
Monthly page views: 7,000 ~ 9,000
Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.
Get reviewed
You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.
Please send an email to me in this format and I will get back to you as soon as I can:
Name:
Email:
Website/blog:
Do you want the review to be public/private?
Websites/blogs currently being reviewed:
Aroha - Ashleenah
Twinkle Toes - Eryn - completed
Gadis bermata cokelat - Nurul Nabila - completed
Chris, 
, 
Post a Comment
Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.