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.
