Sunday, December 17, 2006
This version is outdated. A newer (and better) version is present here.
What if you can view the posts having a particular label without leaving the current page? What if you can do your bit of reading and other stuff and keep clicking away without wasting your time while the labels are loaded in the background and displayed when they are ready? (Okay, enough of that. I see some people rolling their eyes now. :D )
AJAX labels does just the same... It opens a block of text just above all the posts, showing snippets of posts having the label you selected. Click on any of the categories on the right sidebar to see the hack in action.
INTRODUCTION
I had this hack in my personal blog about a month back. It had some really rigorous logic to parse the RSS feed, and hence was not very fast. Now that Google has implemented JSON feeds in their GData structure, my job becomes easier. I also decided to open this hack for the public.
My earlier implementation was in AJAX, i.e. I had used the XMLHttpRequest function for asynchronous procurement of the RSS data and XML DOM parsing to display it. Needless to say, JSON cuts down most of the logic, because of its inherent nature. (I could have used Singpolyma's excellent Outline Converter application, but it would simply have added to the overhead. Also, I don't like NING because they take the website offline too frequently. :p)
If you are interested, here is the link to my original script to parse the XML feed.
This looks strikingly similar to Aditya's ABC Index, but the similarity ends there. The ABC Index was for old Blogger which didn't have the category support or JSON feeds. So he had to make use of del.icio.us categories. Also, the implementation did not use the XMLHttpRequest, but was nevertheless asynchronously loaded. But the XMLHttpRequest gives the best asynchronous experience.
The idea of showing the categories in a block was originally Aditya's, so I should give him due credit.
So much for the intro babble. Lets get on with the hack, shall we?
THE HACK
1. First things first. You should get yourself a copy of the prototype JS framework for this hack to work. Host it in a place of your convenience, maybe your Google Pages, since you already have a Google account. Otherwise, you can get one from here.
<script type="text/javascript" src="http://bloggerhacked.googlepages.com/prototype.js" />
Add this (Change the link if you opt to host the file) inside the
<head> section of your template. I would recommend pasting it just above the closing </head> tag.2. Now the heart of the hack.
Go to http://bloggerhacked.googlepages.com/ajaxlabelsscript
and copy the javascript and paste it just below the code you just added in step 1.
Optional Step: You can modify the CSS part of the javascript you just copied to suit the theme of your blog. I will give some basic tips to modify them here.
#indicator is the loading indicator. To change the background color, modify the hex value of background-color inside. To change the border color, change the hex value of border inside the #indicator.#search-result is the box in which the category results are displayed..search-result-meta is the RSS feed for the label on the top..search-title is the post title of the category results..search-cat is the list of other categories of each post..search-close is the "Click to close" text at the bottom.3. Locate the following code in your template:
<div class='tags'> Labels:
<ul>
<b:loop values='data:post.labels' var='label'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:loop>
</ul>
</div>
Replace the red part of the code with this:
<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>4. Go to Page Layout screen. Add a HTML/Javascript widget just above the Blog Posts widget.
Give the title as blank and following code in body.
<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id='search-result' style='display:none'></div>
5. Save your template and you are done.
ADDITIONAL STEPS IF YOU HAVE LABELS WIDGET IN YOUR SIDEBAR
1. Look for the code of your labels widget. If you don't know how, search for the following:
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>Change the red portion of code with this:
<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>USAGE
Simply click on the label at the sidebar or at the bottom of a post and see the results coming up.
LIMITATIONS AND ROADMAP
I have limited the number of results returned to 5, because it will take up too much of page space otherwise. You can change the value if you change the max-results variable in the query inside the javascript.
I am planning to make a web-based script creator for this, with a truckload of customisations.
Also in the papers is support for navigation of the query results within the result block, a la the previous-posts-next-posts navigation.
Update: Minor correction based on comment by Tsung-kai Chen. Changes in blue. Sorry for the error.
Update 2: Another correction in the main script in http://bloggerhacked.googlepages.com/ajaxlabelsscript.
I won't make silly mistakes anymore. Promise! :D
Labels: AJAX, Beta Hacks, blogger
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment