Creating Categories in Blogger

Sunday, July 30, 2006

Creating dynamic categories in Blogger

I am going to show you a way to create categories for your posts in Blogger. The idea is based on the article How can I make show/hide links for my posts? in Blogger Help. The posts belonging to the selected category are displayed, and the rest are dinamically hidden. You can easily jump from one category to another. You can see an example of how it works on this blog or on my another blog: biominds.blogspot.com.

First, of all, we define two clases on the style sheet (CSS), between the <style> and </style> tags:

.posthidden {display:none}
.postshown {display:inline}


Then, we add the following script between the <head> and </head> tags:
<script type="text/Javascript">
var numbers = new Array();
var dates = new Array();

function showcategory (tag) {

var reg = new RegExp(tag);
var showdate = new Array();
for (var i=numbers.length-1;i>=0;i--)
{
showdate[dates[numbers[i]]] = 0;
}

for (var i=numbers.length-1;i>=0;i--)
{
whichpost = document.getElementById(numbers[i]+'2');
mytags = whichpost.getElementsByTagName("tag");
hidepost = 1;
for(var j=mytags.length-1;j>=0;j--)
{
if (reg.test(mytags[j].getAttribute('label')))
{
hidepost = 0;
showdate[dates[numbers[i]]] = 1;
}
}
if (hidepost) {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
for (var i=numbers.length-1;i>=0;i--)
{
whichdate = document.getElementById(dates[numbers[i]]);
if(showdate[dates[numbers[i]]]) {
whichdate.className="postshown";
} else {
whichdate.className="posthidden";
}
}
}

function listcategory (postid) {

whichpost = document.getElementById(postid);
mytags = whichpost.getElementsByTagName("tag");
for(var j=mytags.length-1;j>=0;j--)
{
label=mytags[j].getAttribute('label');
document.write('<a href="javascript:showcategory('
+"'"+label+"'"+')">'+label+'</a> ');
}
}

function sidebarcategories () {

var taghash = new Array();
var taglist = new Array();

document.write('<li><a href="javascript:showcategory('
+"''"+')">All</a></li>');
alltags = document.getElementsByTagName("tag");
for(var j=alltags.length-1;j>=0;j--)
{
taghash[alltags[j].getAttribute('label')]++;
}

for(x in taghash)
{
taglist[taglist.length] = x;
}

taglist.sort();
for(var j=0;j<taglist.length;j++)
{
count = taghash[taglist[j]];
document.write('<li><a href="javascript:showcategory('
+"'"+taglist[j]+"'"+')">'+taglist[j]+'</a> </li>');
}
}
</script>

After this, you have to modify your BlogDateHeader section:
<BlogDateHeader>
<span class="postshown" id="$BlogDateHeaderDate$">
<script type="text/Javascript">currentdate ='<$BlogDateHeaderDate$>';</script>
<h2 class="date-header"><$BlogDateHeaderDate$></h2> </span>
</BlogDateHeader>

Next step is to include the following code at the beginning of the post section:
<!-- Begin .post -->

<span class="postshown" id="<$BlogItemNumber$2">
<script type="text/Javascript">
numbers[numbers.length] = '<$BlogItemNumber$>';
dates['<$BlogItemNumber$>']=currentdate;
</script>

At the end of the post section, you can add a call to listcategory() which will list links to the categories of the current post, and you must close the span section:

<script type="text/Javascript"> listcategory('<$BlogItemNumber$>2');</script>
</div>
</span>
<!-- End .post -->

Our final step is to put also in the sidebar the list of categories:

<div class="Box">
<div class="Inner">
<h2 class="sidebar-title">Categories</h2>
<ul>
<script type="text/Javascript">sidebarcategories();</script>
</ul>
</div>
</div>

How it works?

Let's put the categories into play: every time you add a new post, you can add to it the HTML tags that you want to see in the list of categories. For instance:
<tag label="hobbies"></tag> <tag label="music"></tag>

I have somewhat arbitrarily chosen the identifiers tag and label, but you can change that in the script if you prefer another names.

Comments?

This post is just a quick guide. I am planning to post a more detailed description of the code. So far, I like its responsiveness and the way it gathers dynamically all the tag information. We can think on several ways to improve it. One issue is that the script is currently only showing the categories from the current posts on the main or archive page, but not for the complete archive.

5 Comments:

  • As i can see only works if all post are on main page. is that correct?
    I have 500 post more or less ...

    saludos!

    By Blogger Mario, at 7:33 AM  

  • Right, only tags for posts at current page (main or archive) are shown.

    I am trying to find a way for showing all categories in the blog, including the ones at the archives, but still no clues.

    saludos

    By Blogger Caramuel, at 8:57 AM  

  • i dont understand why blogger doesn't provide functions such as this

    By Blogger kaki bangku, at 8:13 AM  

  • Caramuels blog looks great with the categories organised this way. I tried to use tabs/labels to do this in my blog, but it doesn't seem to work properly. Did you manage to fashion simpler instructions about how to do this? The existing ones are really hurting my head!

    http://liverpoolsubculture.blogspot.com/

    By Blogger Tony Parrish47, at 2:47 PM  

  • I'm wondering if this will work with the new Blogger version. Some of the variables used in the code are related to the old Blogger version.

    Does anyone know?
    Thanks.
    -Amit

    By Blogger Amit, at 1:36 AM  

Post a Comment

<< Home