August 31, 2006

New hack to improve your label/archive pages

[UPDATE: I developed a better hack based on this to expand/collapse posts in label/archive pages. Check this out too.]

Translations by other bloggers: Chinese

In a Blogger Beta blog, when you select a label or search for a term in the navbar, it displays the contents of all the posts that match the label/search in the main column. This is also true for archive pages for a particular month/year. As Ricardo rightly pointed out in my previous post, this is not very user-friendly if there are too many posts. Here's a new hack to display only the titles of matching posts (with their permalinks). You can then select the post(s) that you want to read and ignore others.

After my first hack to display labels in drop-down form, I spent some time understanding the various sections and widgets of Blogger Beta template. Here's a short introduction to widgets before giving you the code for my newhack. A section is a portion of the blog that consists of many widgets and each widget is associated with a hierarchy of data. For example, the following widget governs the display of blog's posts.


<b:widget id='Blog1' locked='false'
title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>


Here, data:posts is the list of posts associated with the "Blog" widget. As you can see, there is a loop going through each post. 'var' is the loop variable whose values are the various posts. For each post, it displays the date (if there's one) followed by the post contents. 'b:include' is the equivalent of a function call which is defined later. Then, there is an if condition that checks whether the page type is "item". This is so that comments are displayed only for item pages. This is just to give you an idea of widget code. For a detailed dissection, check out Scott's post.

Now, let's get back to the hack. Goto Edit HTML page, click on 'Expand Widget Templates' and replace the line in red above with the following lines.


<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Basically, I check whether the current page is not the main page or an item page. If it is neither, it must be a search page, label page or archive page. For such pages, I just display the post titles (linked to post URLs). Here, blog.homepageUrl is the equivalent of the old tag <$BlogURL$> and blog.pageType serves the purpose of <itempage>.

You can try this hack by choosing a label in my blog's sidebar or clicking on the year 2006 in my archive display. If you like it, try it in your Beta blog and let me know your comments.

Update: I have explained how to override the limit of 20 posts per label page in this post.

Drop-down labels - First blogger beta template hack!

Update: I developed a better version of this hack later with 3 styles of labels. Please check this out.

[Translations by other bloggers: Chinese]

I couldn't contain my curiosity after seeing John's post and Blogger Buzz post that template editing has been opened up for Layouts also in Blogger Beta. So, I decided to jump in right away and try the tiny little idea that I had in mind already. I believe this is the first Blogger Beta template hack and I could't resist saying that ;).

As you know, labels are Blogger's way of supporting categories. But, Blogger supports it only as a list of links unlike Archives for which it supports other options such as Drop-down menu, Hierarchy (Expand/collapse). I thought there's a possibility of a hack right there - Drop-down menu for labels. It was a breeze to implement it after spending a little bit of time with the template.

Even though Blogger has opened up template editing, they are just teaching us the ABCD of it now. So, if you click on Edit HTML, it shows only the condensed form of the template. But, there's an option at the top right called "Expand Widget Templates". If you click it, you will see the template expanded to more hacker-friendly form. Blogger's help page for Widgets just says "coming soon" but what good is a hacker if he cannot understand raw code without help pages :).

Assuming that you have already created labels and added a page element for labels in your sidebar, here's what you need to do to convert the list of labels to drop-down menu like the one I have in my sidebar. First download the expanded template to your hard disk, make a copy of it and find the following section of code in the template.



<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<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'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



Replace the portion above in red with the following code snippet.


<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>



Then upload the modified template to Blogger and Voila, you got drop-down labels!

(I also checked whether Expand/collapse option will work with labels but Blogger doesn't seem to provide the list of posts for every label, instead only depends on the search facility. I will explore the possibility of this when I get more time.)

August 18, 2006

Shake..Shake..Shake your feeds!

I have always wanted to merge multiple feeds to form a single feed with the items sorted chronologically. Here's one such service that I found using Google - FeedShake. I have used it to display other posts from our hacker world in my sidebar.

By the way, I had to use RSS-to-Javascript.com because I couldn't add the generated feed to the blog using Blogger Beta's Layout manager, even though the feed is supposed to be RSS 2.0. Wierd.

Blogger Beta - Easter eggs!

Based on some new features that I have noticed after migration and others' posts about Blogger Beta, I get the feeling that folks at Blogger have been closely following the pain points of bloggers and the solutions offered by the hackers so far. Apart from the "most complained about" lack of categories, comment feeds etc, they have also noticed other shortcomings in Blogger and silently provided 'Easter egg'-like solutions.

One of the Easter eggs that I have noticed is the links at the bottom of post pages named "Newer post" and "Older post". Yes, Blogger Beta has better navigation within the blog. Not many seem to have noticed this because Blogger folks have not talked about this in their intro post for Beta. Greg had already developed a hack for this called Blog Navigator which is being used in this post of Freshblog, for example (left and right arrows next to title). Did somebody at Mountain view notice it?


















Another easter egg that has been discovered recently by Phydeaux3 is that when you search for something in a Beta blog's navbar, the results show up in the same blog instead of a Google page. Posts that match the search term are showing up in the main column itself. Just try searching for something in my navbar and you will see what I am talking about. Aditya's Ajax brainchild (Native Blog search) was the one that enabled many to search within blog so far. Somebody at Blogger did like the idea, looks like. But, their solution is a bit unintuitive in my opinion. If you search for a term that doesn't match any post, there is no explanatory message and the main column just goes empty.

By the way, did you see the date of this post? I rode a time machine and posted it from 3006 :0) As you see in the image below, Blogger Beta provides some options while creating a new post such as using your own date/time, allowing/disallowing comments/backlinks for the post. Silently.



















All that is fine. But, after having derived some ideas from the hacker community, they seem to have closed all doors for any hack in Beta!
1. Old Blogger tags don't seem to work in Beta. I have confirmed this in this blog.
2. Greg and Phydeaux3 have reported that the dynamic page generation doesn't work if any parameter is added to the post URL. This seems to have broken the hacks for categories.
3. To top it all, they are teasing us by not opening up the html editing in Beta. Well, they have promised to open it up "in a few days" but how can a hacker use something without being able to lay his hands in the code?! Quite difficult.

Some people call Blogger Beta as "Blogger for idiots", "Blogger for dummies" etc. But I think we should not deride Blogger's honest efforts to make it easily usable by not so computer-savvy people (not necessarily idiots). While I understand the difficulty of having our hands tied because of this, let's hope that the curtain will raise soon and we will be able to play our parts in the new show.

August 17, 2006

Funny Blogger support!

My question to Blogger support:

Hi,

I switched to Blogger beta today. But I couldn't find the blog's comment feed. Main page has post feed's link and post page has per-post comment feed. Where is the blog's comment feed?

Their response:

Hi there,

Thank you for your comments and suggestions regarding comments feeds for Blogger in beta. We appreciate the input and we will certainly keep it in mind as we work to improve Blogger in beta.

Thanks for using Blogger!

Sincerely,
Danish
The Blogger Team

----------------

Excuse me, when did I give suggestions? I asked a question which needs an answer. !?!

August 16, 2006

My experiences migrating to Blogger Beta!

When I logged into Blogger today, I saw the Blogger Beta invitation to the right and Oh boy, I felt privileged to be invited! Having read about it in Freshblog and experimented a bit yesterday with this new baby of Google, I immediately opted to switch and gave my google account. The Google God displayed a message that I will be informed once the migration is complete. I was wondering for a moment how long will it take. But when I checked my gmail, it was already done.

The first thing I did was to create labels for my uncategorized old posts (not too many, just 7). All of them got the same label, yeah you guessed it right, "Hacks". Then, my attention turned to the per-post comment feed but it ain't working (try clicking the 'subscribe to' link at the bottom of this page and you will see the error). It worked for me yesterday when I created a new test blog. Is there a bug in comment feeds for migrated blogs? Anybody out there got the combination working?

And I don't seem to find the comment feed link for the entire blog. At the bottom of the main page, I only see the post feed. If anybody manages to find blog comment feed, please let me know.

Then, I decided to take the WYSIWYG road and moved stuff around in the layout. I found that the layout editor doesn't allow me to move the blog header element to the bottom of the page. Naturally. But, I had to do something else wierd!?! So, I moved the archives to the top :) You can see the new expand/collapse format of archives.

Finally, what could be the feed that is cool enough to add to my layout? A dynamic Blogsearch feed for the search term "Blogger Beta"! Indeed, quite a few people are talking about this upgrade!

Update: Just after publishing this post, I found that the per-post comment feed gives error only for pre-migration posts. The per-post comment feed for this post doesn't give error but doesn't seem to work as well. My test comment does not appear in it.


August 13, 2006

Related posts from your blog

Few people had expressed interest in finding related posts from their blog automatically. If you have lot of posts in archives, it is indeed difficult to find the ones that are related to the current post.

By tweaking my previous hack to display related posts from Blogosphere, I have come up with another version to do this. This time, I have tweaked it to bring out only the relevant posts or None. I use the "Search in title" operation in Google blogsearch to find the earlier posts with titles that have atleast 2 non-trivial words from the current post's title. I hope this will encourage more people to try this hack.

For plugging-in this feature to your blog, add the following piece of code after the <$BlogItemBody$> tag.


<ItemPage>
<script language="Javascript"
src="http://www.anniyalogam.com/scripts/relatedposts-blog.php?
url=<$BlogItemPermalinkUrl$>&blog=<$BlogURL$>">
</script>
</ItemPage>


This will display the related posts right after the Post body as you see below (only in post pages). Please note that it won't display anything if there are no related posts. You could also place in any other location in your template that you like to.

August 8, 2006

Hack to display related posts from Blogosphere

John at Freshblog has listed the statistics about blogosphere in this post. At the rate of 175,000 new blogs created each day, it is not easy to find the posts that you are interested in. Thankfully, Google blog search and Technorati search help us in this arduous job. But still, one has to use complex search operation with multiple keywords to get the most relevant results.

This hack is aimed at easily finding other posts from Blogosphere that are related to the one that you are currently reading. Here's how it works:
1. It picks up the post title and removes the trivial words such as "for", "of" etc.
2. It then performs a context-sensitive search operation using Google blogsearch with a combination of "all words" search and "exact phrase" search. This is to avoid irrelevent posts that could show up with a simple "all words" search as much as possible. (Note that this is still "best effort" only).
3. The search results (first 5) are obtained in RSS format and my PHP script condenses it to display only the relevant post's title, link, creator's name and creation date. (I did not use RSS-to-Javascript.com's service because of some special processing required such as removal of html tags etc).

To summarize, every post page subscribes to its context-sensitive search feed and the freshest relevant posts are shown at anytime.

The best way to use this feature is to add a bookmarklet to your browser as Greg suggested while introducing this feature at Freshblog. Here's how to do it:

1. Just right-click the link below and "Add to favorites" (preferably under Links folder so that it shows up in Links bar). IE might complain about bookmarking javascript code. Ignore it and continue to add the bookmarklet. If you are using firefox, right-click, choose "Bookmark this link" and add to Bookmarks toolbar.

Find related posts

2. Whenever you are in your/another blog and you would like to read more on the topic, just click this bookmarklet and it will take you to a page that shows related posts.

You could also plug-in this feature to your blog itself by changing your template. Add the following piece of code right after the Backlinks section (indicated by </BlogItemBacklinksEnabled>) or after the comments section (indicated by </BlogItemCommentsEnabled>).

<script language="Javascript"
src="http://www.anniyalogam.com/scripts/relatedposts.php?
url=<$BlogItemPermalinkUrl$>">
</script>


An interesting note: You can see the hack in action at the bottom of this page. The second relevant post is about aditya's similar hack to display relevant posts in "create post" page. I would have never known about it if not for this hack!! So, you never know what you are missing if you don't try this ;-)

August 3, 2006

Goodies to promote your blog!

Over the past month or so, I had announced some tools that I developed for Blogger users. Here's a recap of the tools from Anniyalogam.com for the benefit of Blogdesam users.

Featured post of the day from archive

This tool will revive a different post each day from your blog's archive. The post will be selected randomly without your involvement (based on the current date). It will show the post title, permanent link to the post and first few lines of the post. Even if you don't post anything for a few days, your visitors will be able to read the old posts revived by this tool. It will be a surprise to see which post gets revived each day!!

Archive Browser

Blogger archives have been difficult to browse through as they are large files with all the extra baggage in the blog. There are also too many of them (more so if you have weekly archives). Here's a tool which you can use to view an entire year's worth of archives in one page. It shows the post titles, a Technorati-like text-only preview (first few lines) of each post and the permanent link to the post. You can use it with anybody's blog, not just yours.

Other possible uses of this tool:
1. You could use it to backup an entire year's archives into a file. Just save the page generated by this tool using your browser.
2. You could use the integrated Google search facility to search your archives.

One-click comment notifier

One-click notifier is a tool to keep your comments section lively. When somebody posts a comment in your blog and you respond to his question/comment, the commenter may not even see your response (unless he constantly monitors your blog). With One-click notification, you can send an automated email message to the commenter with just one click. This message will contain your name, your post's title and its permanent link so that the commenter can easily come back and see your response.

Here are some statistics:

Archive Browser has been used with 260 blogs.
Featured post of the day is used in 97 blogs.
One-click Notifier is used in 59 blogs.

You could plug-in these tools to your blog by adding few lines to your template. Please visit http://www.anniyalogam.com for further details. There are also some Blogger templates with these tools built-in at http://www.anniyalogam.com/templates/templates.html.