home Twitter RSS feeds

Tutorial: Displaying list of labels on your blog - Ver. 2

Blogged by: Kitty on Friday, January 10, 2014  
Commentators: Blogger PGU, Blogger Kitty, Blogger Ratri Anugrah, Blogger Kitty, Blogger Ratri Anugrah, Blogger Kitty, Blogger Ratri Anugrah,
Facebook comments: comments

Hello guys. It's been a super long time since I posted a tutorial so here is one. This tutorial is actually an update to Displaying list of labels on your blog tutorial. Thank you to David Orozco for pointing me to this handy (and much simpler!) approach on how to display all the labels (or tags) in your blog.

The advantage of this method over the older one goes beyond the fact that it is shorter, but remember how some of you noted that the list would disappear once you're logged out? Well, if you use thing method will get rid of that problem.

Anyway, without further ado, let's get on to the tutorial.

As usual, always remember to backup your HTML codes before making any changes to it. I'm not going to be held responsible if you end up screwing up your template in the process.


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. Change the text in red accordingly.


<script type="text/javascript">
//<![CDATA[
var homepage = "http://your-blog.blogspot.com";
function showLabels(json) {
var label = json.feed.category;
document.write('<ul>');
for (var i = 0; i < label.length; i++) {
document.write('<li><a href="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
}
document.write('</ul>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>


At this point, if you want the labels to appear as a bullet point/vertical list, then you can save your template and stop here. However, if you want the labels to be displayed as a full paragraph (like mine), continue reading.

Step 3
Find the <ul> </ul> <li> </li> tags and delete them.

Step 4
Next, look at this line:

document.write('' + label[i].term + '');

At the end of this line, you can see the </a> is placed between the two single-colon/quotation mark ' '. You will need to leave a space between the </a> and the second colon, like this:

'</a> '


Once you're done, save the template!

Script is created and maintained by Piotr and Oskar.

Labels: ,


Comments to Tutorial: Displaying list of labels on your blog - Ver. 2:


Hi Kitty,
thank you for your informative tutorials. I am working on a project where I would like to pre-generate a list of labels to a blogger template. Do you know if that would be possible?
The reason is being able to have a fixed set of learning outcomes for the learners to choose from whenever they make a post in their individual blog (digittal portfolio).

Thank you in advance!
-Peter

@Peter, I do not think you could pre-generate the labels without actually creating the labels first in the blog. The way this code works is that you must already have the labels created IN the blog for the code to be able to display them. The labels cannot be generated from the template.

Hi, Kitty. This is the one i'm looking for since making a drop down menu for label is so frustrating. But how if i wanna use this code only for several labels, not all labels on my blog. Can you teach me how?

@Ratri, I'm afraid there isn't a way to generate only some labels and not others. This codes automatically generates a list of all labels. The only way you could do that is to do it manually, like using the drop-down menu method. Since you said you only need several labels, the drop-down menu probably is the best method.

I've tried using the drop down menu using a simpler code. The drop down works well, but when I click on of the label, it doesn't work. Is there something missing? I use this code:

<*ul*><*select*>
<*option* value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20A">Author: A
<*option* value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20B">Author: B


I'm still using it on my blog just in case you wanna see it live. Please help. Thanks

@Ratri, it doesn't work because you're missing the href tag and command. The code should look like this:

<select onChange="location.href=this.options[this.selectedIndex].value;">
<option value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20A">Author: A</option>
<option value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20B">Author: B</option>
</select>

Thank you so much! It works very well now.

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.

Facebook comments to Tutorial: Displaying list of labels on your blog - Ver. 2:


Tutorial: Displaying list of labels on your blog - Ver. 2

Blogged by: Kitty on Friday, January 10, 2014  
Commentators: Blogger PGU, Blogger Kitty, Blogger Ratri Anugrah, Blogger Kitty, Blogger Ratri Anugrah, Blogger Kitty, Blogger Ratri Anugrah,
Facebook comments: comments

Hello guys. It's been a super long time since I posted a tutorial so here is one. This tutorial is actually an update to Displaying list of labels on your blog tutorial. Thank you to David Orozco for pointing me to this handy (and much simpler!) approach on how to display all the labels (or tags) in your blog.

The advantage of this method over the older one goes beyond the fact that it is shorter, but remember how some of you noted that the list would disappear once you're logged out? Well, if you use thing method will get rid of that problem.

Anyway, without further ado, let's get on to the tutorial.

As usual, always remember to backup your HTML codes before making any changes to it. I'm not going to be held responsible if you end up screwing up your template in the process.


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. Change the text in red accordingly.


<script type="text/javascript">
//<![CDATA[
var homepage = "http://your-blog.blogspot.com";
function showLabels(json) {
var label = json.feed.category;
document.write('<ul>');
for (var i = 0; i < label.length; i++) {
document.write('<li><a href="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
}
document.write('</ul>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>


At this point, if you want the labels to appear as a bullet point/vertical list, then you can save your template and stop here. However, if you want the labels to be displayed as a full paragraph (like mine), continue reading.

Step 3
Find the <ul> </ul> <li> </li> tags and delete them.

Step 4
Next, look at this line:

document.write('' + label[i].term + '');

At the end of this line, you can see the </a> is placed between the two single-colon/quotation mark ' '. You will need to leave a space between the </a> and the second colon, like this:

'</a> '


Once you're done, save the template!

Script is created and maintained by Piotr and Oskar.

Labels: ,



Comments to Tutorial: Displaying list of labels on your blog - Ver. 2:


Hi Kitty,
thank you for your informative tutorials. I am working on a project where I would like to pre-generate a list of labels to a blogger template. Do you know if that would be possible?
The reason is being able to have a fixed set of learning outcomes for the learners to choose from whenever they make a post in their individual blog (digittal portfolio).

Thank you in advance!
-Peter

@Peter, I do not think you could pre-generate the labels without actually creating the labels first in the blog. The way this code works is that you must already have the labels created IN the blog for the code to be able to display them. The labels cannot be generated from the template.

Hi, Kitty. This is the one i'm looking for since making a drop down menu for label is so frustrating. But how if i wanna use this code only for several labels, not all labels on my blog. Can you teach me how?

@Ratri, I'm afraid there isn't a way to generate only some labels and not others. This codes automatically generates a list of all labels. The only way you could do that is to do it manually, like using the drop-down menu method. Since you said you only need several labels, the drop-down menu probably is the best method.

I've tried using the drop down menu using a simpler code. The drop down works well, but when I click on of the label, it doesn't work. Is there something missing? I use this code:

<*ul*><*select*>
<*option* value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20A">Author: A
<*option* value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20B">Author: B


I'm still using it on my blog just in case you wanna see it live. Please help. Thanks

@Ratri, it doesn't work because you're missing the href tag and command. The code should look like this:

<select onChange="location.href=this.options[this.selectedIndex].value;">
<option value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20A">Author: A</option>
<option value="http://imawesomenerd.blogspot.com/search/label/Author%3A%20B">Author: B</option>
</select>

Thank you so much! It works very well now.

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.

Facebook comments to Tutorial: Displaying list of labels on your blog - Ver. 2:


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

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.

Wooden board

Layout #1

Dark chic

Layout #2

Royal crimson

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.

Blog Advertising - Advertise on blogs with SponsoredReviews.com

Business 2 Blogger

banner

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

Related Posts Plugin for WordPress, Blogger...