{C++ etc.}

Latest Posts
 
Home | C++ Posts | Linux Posts | Programming Posts | Issue Tracking Posts

Thursday, June 08, 2006

Code: Blogger Categories Using Javascript - The Complete Guide

Several methods have been suggested on this subject. I went through a few of them in order to add "Catagories" to my blog. Some improvisations had to be done to make it work so I thought I'll publish an easy to follow guide on the subject. Using javascript to hide catagory names in the TI

Credits:

  • Taher Baderkhan - Calling Blogger advanced search using javascript. link
  • Sean - Using javascript to hide category names in the title. link

The process would be done in three steps.

  • Step 1 - Add function to use Blogger advanced search and add links for each catagory to call it.
  • Step 2 - Hide categories included in the title.
  • Step 3 - Add a line to indicate the categories under which each post had been posted.


Let's get down to business.

Step 1 - Add function to use Blogger advanced search and add links for each catagory to call it.

Add this javascript function within the <head> tags of the blog (outside the <style> tags).

<script language="javascript">
var blogUrl = "YOUR BLOG ADDRESS";
function showCategory(category){
var encodedCategory = escape("\"" + category + "\"");
var url = "http://search.blogger.com/?ui=blg&as_q=";
url = url + "&bl_url=" + blogUrl + "&bl_pt="
+
encodedCategory + ":";
window.location.href = url;
}</script>


Make sure to replace the above words [YOUR BLOG ADDRESS] with your blog's address. Don't include the www part of the address. inclose the blog's address in qutations

Categorizing your posts

 Every time you create a new posting make sure to prefix the title of the posting with the name of the category. That’s all. For example, if your posting has the title "Nice Flowers" and you want to add it to the category "Garden" then your posting's title should look like this

Garden: Nice Flowers

Creating the Category URL in the sidebar
To create a category section for your blog. The URL for a category should look something like this


<a href="javascript:showCategory('THE CATEGORY');">THE
CATEGORY</a>


Clicking on the link will display all the postings under that category in the blogger search page.

I did not intend this at the begining but I realized that you can even add your posting to more than one category. All you need to do is prefix all the categories to the posting's title. You can seperate categories with commas or semi cololns. For example: If you want to add the "Nice Flowers" posting to the categories "Garden" and "Environment" then the title should look something like this

Garden, Environment: Nice Flowers

The only problem with this solution is that if you insert a new posting it takes few minutes until the blogger search engine indexes your page. So, in the first few minutes clicking the category link won't display your latest posting. I have tested this and I found out it takes around 5 - 10 minutes for your result to be displayed in the category search page. Not bad


Step 2 - Hide catagories included in the title.

It's not nice when you have all the catagory names appearing in your post titles. Let's add a function to strip catagories when displaying them.

<script language="javascript">
var post_catagory_js='';

function filterCategory(category) {
post_catagory_js='';
var tok_array = category.split(":");
post_catagory_js = tok_array[0].replace(/:/, '');
document.write(tok_array[tok_array.length-1]

.replace(/:/, ''));
}

function addCategoryComment(){
var cat_array = post_catagory_js.split(",");
document.write('Filed under ');

for(i=0;i<cat_array.length;i++)
{
cat_string = cat_array[i].replace(/,/,'');
document.write('<a href=\"javascript\:showCategory

(\''+cat_string+'\')\; \">'+cat_string+'</a>');

if(i != cat_array.length-1) document.write(',');
}

}

</script>

You'll notice that there are two functions. The first is the one we'll look at for the moment. It will strip off the section of string which precede the ":" symbol. If you use a different symbol to differentiate the categories section and the actual post section, just insert it in place of ":" in the following lines:

var tok_array = category.split(":");
post_catagory_js = tok_array[0].replace(/:/, '');
document.write(tok_array[tok_array.length-1].replace(/:/, ''));

The "replace(/:/, ''" parts are not essential. You can leave them out if you want to.

Now, find the "<$BlogItemTitle$>" tag in your template and replace it with:

<script language="javascript">

filterCategory('<$BlogItemTitle$>')</script>


and replace “<$BlogPreviousItemTitle with:

<script language="javascript">

filterCategory('<$BlogPreviousItemTitle$>')

</script>

Step 3 - Add a line to indicate the catagories under which each post had been posted.

This is where the function addCategoryComment, which we saw earlier, comes in handy. Since we have already added the javascript function, we can get down to adding the "Filed under [categories]" section. Note that it's assumed that you used "," to separate categories. I wanted to insert this at the bottom of the post. You can insert it anywhere you want with some minor adjustments.

Find the "<$BlogItemBody$> " and add the following html code right next to it.

<br><ct><script language="javascript"> addCategoryComment()</script></ct><br>


Result:

<$BlogItemBody$><br><ct>

<script language="javascript"> addCategoryComment()</script></ct><br>


Note the <ct> tag. This is to add a different style to the string. If you leave this out, the default style used in the post string will be applied to the footer that we'll be adding.

The style called "ct" doesn't exist in your stle sheet. Adding:

.post ct {
display:block;
float:left;
text-align:left;
font-family: sans-serif;
font-style:italic;
font-size:90%;
line-height:1.5em;
color:#666;
}

should fix this.

You're done! Just remember that you have to wait a few minutes (hours?) before you start getting search results.

Btw. This post was partially written in MS Word 2007 beta 2 blog writer. I had to paste the codes in dreamweaver and paste it back in word in order to get the correct html.

Posted by gayan at 9:24 PM
Bookmark and Share

2 comments:

Rasini said...

Hey, it's a handy step by step guide :). It all went right except for some cut and paste errors ;)
By the way u dont need that semicolon after the small script where u ask to replace the $BlogPreviousItemTitle.

Tx alot

4:29 AM
gayan said...

I'll correct it right away.Must have been a typo

4:31 AM

Post a Comment

Subscribe to: Post Comments (Atom)