September 26, 2006

Hacked templates with 3 columns, Peekaboo posts

Over the past few weeks, I came up with hacks for Blogger Beta that have been liked by many. My hacks were easy to apply for most of my readers. But, I realized that some people still find it difficult to make the correct changes in the template. For such bloggers, it would be easy to just pickup a template with all my hacks built-in. At first, I thought I will come up with my own design for the templates. But, due to lack of time, I decided to just add the hacks to some of Blogger's templates.

Here are the list of hacks that were built-in:

1. 3-column conversion with additional sidebar

I decided to make the sidebar on the right wider than the left sidebar. Your Profile, archive in hierarchy format, recent comments etc will benefit from a wide sidebar (or widebar :)).

2. Peekaboo posts with summary in main page

This hack displays only post summaries in main page which expand inline upon clicking a "Read more" link. You can choose which posts are divided into summary and full post by using the post template described in step 3 of this post.

3. Peekaboo posts in label/archive pages

Only post titles will be shown in such pages so that the reader can quickly find what he wants to read amidst a long list of posts. A [+/-] toggler can be used to expand/collapse the posts. (Read more about this)

4. Multi-style Labels widget

Labels shown in multiple styles - Drop-down menu(default), zoom style and flat list (read more).

5. and Digg hotlinks in post footer

6. Author comment notification (read more about this)

Check-out these hacks in action in the following Live demo blogs. If you like one of them, right-click the "Download template" link, save the code for the template and upload it to Blogger (Don't copy/paste, you might miss some lines). I will come up with more hacked templates as and when I get more free time.

Hacked-scribe Live (Download template)

Hacked-minima Live (Download template)

Get Hacked!

September 25, 2006

Displaying recent comments in sidebar

UPDATE: I came up with a customizable version of Recent comments widget later. Please try it instead of this.

The much-awaited comments feed is completely functional now! I saw Hoctro's post on this topic and found my blog's comments feed also working great. Blogger team seems to have fixed the stale comments issue on Friday. It's very easy to show recent comments in sidebar now (as I have done in my widebar - the wide sidebar). Just goto Page Elements tab, add a page element of type Feed to sidebar and give the following as the Feed URL. You could select to show the date and comment author if you want.

Notice that they have changed the feed URL not to contain any blog ID etc. This makes it easy to play with any blog's post and comment feed URL programmatically.

UPDATE: Many readers asked me why comments are not immediately shown after published. It is because it takes some time for the new comments to be added to the comment feed. Just wait for some time and it will show up. Yes, this is a limitation of using feed to show recent comments.

September 24, 2006

Peekaboo posts improved again

Everybody's favorite Peekaboo posts has been improved once again by our beloved Hans! The only thing that I was not comfortable about peekaboo was that after collapsing back an expanded post, the page showed totally different posts which was a bit confusing. With Hans's improvement, the collapsed post's summary will be the one at the top of the page indicating where you were before clicking "Read more". I have incorporated this improvement in my hackosphere.js file.

Good news is that if you have applied Peekaboo hack already, your blog will exhibit this behaviour without you making any changes (the magic wand of Hackosphere will take care of this :)). Hans also has another suggestion if you would like the post title & summary to appear at the top of the page. If you prefer that way, check out his post.

September 21, 2006

Peekaboo posts for non-Beta blogs

Hans has got our Inline expandable post summaries (a.k.a Peekaboo posts) hack working with old Blogger template also! So, those of you who are waiting for the golden invitation for switching to Beta, can have the hack up and running in your blog now. And be rest assured that the hack is also available after switching to Beta. Here's Hans's post on this topic.

Hoctro has a few nice hacks too in his place in Blogosphere - one for displaying vertical tabs with labels and another to create 3 columns (even 4 or 5) with Yahoo! CSS Grid system. Why live the simple life with 2 columns, I say ;)

September 20, 2006

Super Peekaboo posts

Yes, that's what Hans calls them! Earlier, Hans improved my Peekaboo posts hack by adding a "Summary only" link with which you can collapse it back to summary. Many of you thought this is a good feature. Together, we have also made the "Read more" link to show up only for the posts that have been divided into summary and full post. So, it won't appear anymore for the shorter posts/old posts which you haven't divided. As an example, this post was not divided and so you don't see any "Read more" link.

Hans has announced the final version of code in his post. I have also updated my original post with this version of code. If you have already applied the hack, you just have to replace some lines in red with different lines in red :). If you are a new Beta blogger, you could wait for the 3-column templates that I am going to release which will have this and my other hacks built-in!

September 18, 2006

Peekaboo posts hack is ready to use

I had announced Expandable posts with Peekaboo view earlier. After trying it, Hans reported the error dump that he got while clicking "Older posts" in the main page. But it seems to happen even in blogs that don't use this hack and seems to be a bug in Blogger. Hopefully, Blogger folks will fix this. Other problem that Vivek reported was that the style (font size etc) of the expanded portion doesn't match with the style of the summary. I have fixed this problem and updated the instructions in my previous post. All those who have already applied my hack, please change your blog template and post template as per the new instructions. [Rest of the post is technical, skip it if you would like to.]

I fixed Vivek's issue by replacing div tags with span tags. With div, if I don't specify a class, it doesn't seem to use the parent div's class. When I enclosed the "fullpost" within span, this problem goes away. The reason why I didn't use span before is that there could be several spans within the post for bold, italic text etc. Now, I give unique ids called "fullpost" and "readmore" and identify the span portions that I am interested in. Hans, please note that the showFullPost() function's code has been changed.

September 16, 2006

Blogger hack: Expandable posts with Peekaboo view

Translations by other bloggers: Spanish, Indonesian, Chinese, Malaysian

Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!! I got some requests to do such a hack and I managed to get it working. Later, Hans improved it by adding a "Summary only" link with which you can collapse the post back to summary. Together, we also made the "Read more" link to show up only for the posts that have a summary. This is an amazing hack but you need to be careful while changing your template. If you are not familiar with HTML, I strongly suggest you to get help from somebody who knows HTML while applying this hack. Here are the steps to follow.

Step 0: Download and save your template so that you can go back to it if there is any problem with this hack (Important!)

Step 1: Find the
tag in your template and add all the code from this page before it.

Step 2: Find the includable called 'post'
and copy/paste the changes highlighted in red in this page (Be very careful and avoid mistakes. Note that the word "uncustomized-post-template" may not appear in your template but that's fine.). To find the includable, you could search for the term id='post'. If you are not able to find it, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.

Step 3. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings. (Please DON'T type these lines yourself because you might introduce some spaces that will break the functionality)

Type your summary here
<span id="fullpost">
Type rest of the post here

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. It is important to make sure that the /span tag above is at the end of the post. To ensure this, use Edit Html tab instead of Compose tab while typing the post. After typing, you can go to compose mode and change fonts/colors etc. Please note that you could also divide some (or all) of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog -
2. AJAX-driven fast template - Neo ]

Important notes:
Note 1: Please don't forget to add a link to Hackosphere in your sidebar. That's the only thing I am expecting in return :)
Note 2: If you would like some fade in/fade out special effect for this hack, you can have it by making the few changes described in this other post.
Note 3: If you would like the "Read more" link to take you to the post page instead of expanding in the main page itself, use this other hack.
Note 4: If you click "Older posts" link, the "Read more" link may appear even for the posts which you haven't divided into summary and full post. This is a known problem which we haven't solved yet.

September 14, 2006

Tweak your label tabs

Translations by other bloggers: Chinese

Here I have an improved version of Hoctro's labels as tabs hack. Quite a few people have more than 10 labels and I am sure they wouldn't want to show all their labels as tabs. I have a modified version which will allow you to show only the top 5 labels (based on frequency of their usage) as tabs. I also made two other changes to the code:
1. Show a "Home" tab that points to your main page
2. Modify the label URL such that the label page will show upto 100 results (remember my previous hack?).

If you would like to use this updated version, first install Hoctro's original hack if you haven't already. Then, goto 'Page elements' tab, click "edit" for the label-as-tabs widget and change the sorting order to "By frequency". Then, find and replace Hoctro's widget code (his step 5) with this code.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<li><a expr:href='data:blog.homepageUrl'><span>Home
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (labelnum++ &lt; 5) {
document.write("<li><a expr:href='data:label.url +

Save the changes and check it out! As always, you could tweak the limit of 5 to any other number you like. I guess you can easily find the line to change. You will, if you have been taking the journey of hacks with me ;-)

Also, check out Ricardo & Vivek's nice trick to make your links in sidebar open in a new window. This is a good idea to keep your blog open even after the reader clicks one of your links.

September 12, 2006

Expandable post summaries with Beta

[UPDATE: I came up with two better versions later. Use one of them instead of this older version.
1. One with which you can selectively make some of the old posts expandable i.e. only summaries will show up for them and clicking a "read more..." link will take you to the post page.
2. One that expands posts in the main page itself - Peekaboo style.]

Jornada left a comment in my blog that he found a blog which explained how to show expandable post summaries with Beta. Good thing about showing only post summary in the main page is that your readers can quickly find all that you have written about. Also, your blog gets an 'online journal'-like neat look. A "Read more" link is provided which takes them to the post page to read the entire post. Please note that you, as the author, have the flexibility to choose the portion of your post that appears as summary.

This hack is only an adaptation of Blogger's original instructions for expandable post summaries to Beta template. You can find Jornada's post about this here. I thought I will re-post the instructions with minor modifications for my readers.

Step 1. Search for "post-header-line" to find this portion of code in your template and add the lines in red as shown.

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>


<a expr:href='data:post.url'>Read More......</a>

<div style='clear: both;'/> <!-- clear for photos floats -->

Step 2. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.

Type your summary here
<span class="fullpost">
Type rest of the post here

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Follow the format and only summary will show up in your main page. Please note that you also need to divide your old posts like this (atleast the ones showing up in main page) into summary and full portions by editing them.

September 10, 2006

Hoctro's tabbed label pages

Hoctro has come up with an amazing hack to display multiple tabs for label pages under the header. If you consider labels as the mechanism by which you subdivide your blog, this hack helps you to present the various topics as tabs to the visitor. He has also found a nice set of tab images to select from. I have used his hack in my blog as you can see. I think it doesn't get any better than this as far as labels go - we have hacks to present labels as drop-down, zoom, cloud and now tab styles!!

Some notes about this hack:
1. I am hosting all the free tab images provided by in my website. Hoctro has described how to use these hosted images in your CSS.
2. It is possible to have multiple label widgets in your blog. So, you don't have to remove your existing multi-style or cloud widget for adding this tab style. Just add a new Label page element with hoctro's code.

Go ahead and jazz up your blog with tabs! If you like what Hoctro has done, leave a comment in his post.

September 8, 2006

Peek-A-Boo view of posts in label/archive pages

Building upon my earlier hacks for label/archive pages, here is a hack that significantly improves visitor experience. The idea is to show only post titles to start with but also provide a [+/-] toggler for each post. If the visitor clicks the toggler, "Peek-a-boo", (s)he sees the post contents also. He/she can select the posts for peek-a-boo view and read many posts without ever leaving the page. You could present all your posts in the same page for peek-a-booing by increasing the max-results.

Here's an image showing one post expanded and two other collapsed. Note that [+/-] toggler is used for both expanding and collapsing.

Would you like Peek-A-Boo in your blog? Then, search for the term "blog-posts" in your template to find the portion of code shown here in black and insert the lines highlighted in red at appropriate places.

Once you save the changes, you will be able to expand/collapse posts in label/archive pages. It works for the search results page also. Ain't it cool? Have a good weekend!

September 6, 2006

How to control the number of posts in label pages

Blogger defaults to 20 posts per page in label pages and provides a link called "Older posts" to view other posts. If you are using my hack to display only the page titles in these pages, you will agree that the display is too short and we could show many more posts. Michael identified this possible improvement and I thought it's a good idea. I found that the parameter that controls the number of posts is "max-results". For example, the URL "" will show a maximum of 100 posts with the specified label.

Here's what you need to do to increase the number of posts. Download your template, save a backup copy and use your editor to replace all occurances of
data:label.url + "?max-results=100"

Then, upload your new version and check to see if it works. This will work irrespective of the kind of labels widget you have (Blogger default, drop-down or multi-style version). Also, you could use some other number instead of 100. I thought 100 is a good number but it may not work for you.

Did you check out the section called "Beta hacks from neighborhood" in my sidebar? It has links to some cool hacks from others such as
1. Phydeaux3's Label clouds
2. Vivek's hotlinks to most of the social bookmarking sites and google translate utility.

Update: If you are using label clouds and you want to set max-results, replace this line in Phydeaux3's code
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
with this.
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t) +'?max-results=100';

The magic of "Blogs of Note"

Wow, Becoming the Blog of note is really something! It has brought 6000+ unique visitors to my blog since yesterday! Any my subscriber base has increased from 34 readers to a whopping 196 in just one day. I am overwhelmed, to say the least :) I extend a warm welcome to all my new readers.

To get a good handle on my subscriber base, I thought I will replace the RSS/Atom autodiscovery links in my blog with Feedburner link. You could also use this instruction if you would like to make your Feedburner feed as the only auto-discoverable feed. In Beta template, the autodiscovery links hide behind the line (even if you expand widget template).

<b:include data='blog' name='all-head-content'/>

I found it's expansion by viewing page source and replaced these RSS/Atom links

<link rel="alternate" type="application/atom+xml" title="Hackosphere - Atom"
href="" />
<link rel="alternate" type="application/rss+xml" title="Hackosphere - RSS"
href="" />

with this feedburner link.

<link rel="alternate" type="application/rss+xml" title="RSS"
href="" />

With this change, Firefox auto-discovered this feed from my blog. But Bloglines still finds only the old atom.xml and rss.xml (maybe from cache). So, if you had given my blog URL in bloglines and subscribed to one of these old feeds, please use the "Subscribe to bloglines" button in my sidebar and subscribe to the Feedburner feed instead.

Ok, enough of subscriber tracking, I guess. I will be back with a good hack soon.

September 5, 2006

I just made it to Blogs of Note!

My blog has been recognized by Blogger team as a blog of note! I am grateful to them for letting my blog appear in the main page of and in thousands of bloggers' dashboards. You made my day! I also thank John/Greg, Avatar and all my readers for their continuing support.

- Ramani

September 4, 2006

Multi-style labels widget for Blogger Beta

Multi-style labels widget is my first complete widget for Blogger Beta. It supports 2 custom styles (zoom style!, menu style) and the default list style provided by Blogger. The idea is to allow your blog's visitors to choose the style that they like instead of you fixing one particular style. I am also introducing zoom style that displays labels with font size proportionate to their usage! (sorta like a cloud but not exactly).

Interested in a hands-on experience of how this works? Check out the Multi-style labels widget in my sidebar. There are three icons one for each style - just click any icon and you will see the labels in that style. I have set zoom style as the default style.

- Icon for list style
- Icon for menu style
- Icon for zoom style

Excited about this? Try it in your blog. First, goto Template->Page elements tab and remove your label element IF you have one. Then, goto Edit HTML tab (no need to expand widgets) and identify the start of the sidebar section by looking for this line.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Insert the code from here after that line (right-click, save it and copy/paste). Once you have inserted, you could goto Page elements tab and move this new Labels element. If you don't want the combo, you could use the zoom style alone by inserting the widget code from here.

I hope this widget will encourage many bloggers to switch to Beta and take the hit of labelling all their posts. This also proves how effectively we could combine Javascript with Bloggerscript (the new template language :)) and develop some cool widgets!

September 3, 2006

Pete's visit to my blog

Pete, a Blogger Beta developer, visited my blog and clarified about the new URL for labels. It seems the change is to follow the rel-tag microformat so that tag-based applications can work with Beta blogs. Good move! I am also happy that my blog is under the radar screen of a Blogger employee.

Assuming that Pete will come back to my blog at some point, I have some rants below:
1. When I link to others' blog posts, my post doesn't show up as a backlink in their blog i.e. outbound backlinks from Beta blogs don't seem to work. I know that there used to be a nofollow meta tag in Beta template but I believe it has been removed (I checked in my blog too). Why doesn't backlinks work still?
2. In labels widget, the list of posts associated with each label is not available as data. Is this because each post could have many labels and there could be too many posts? If this was available, we could have displayed labels also in Hierarchy style which is much more flexible than Links list.
3. My migrated blog's comment feed URL gives me an error "We're sorry, but we were unable to complete your request.". Others who migrated have reported similar issues or stale comments in the feed (it seems to work fine for new blogs created in Beta). I didn't get any useful response from Blogger support when I reported this. Hope this is something being looked into. If this feed works, then it would be easy to show the recent comments in sidebar!

That's it for now :)

September 2, 2006 and Digg hotlinks for your Beta blog

[Translations by other bloggers: Chinese]

Quite a few bloggers have hotlinks to social bookmarking websites such as Delicious and Digg so that visitors to their blog can quickly submit their posts. Vivek Sanghi identified that the method described in this post will not work for Beta blogs and also suggested that I could look into it. I did and got them working with this blog. You can find these links below any of my posts, next to the Labels.

If you want these hotlinks for your Beta blog, expand your template widgets and search for "post-labels". You will find the portion of code shown below. Insert the code in red before the /span tag.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>

  <a expr:href='";url=" +
data:post.url + "&amp;title=" + data:post.title'
  <a expr:href='"" +
data:post.url + "&amp;title=" + data:post.title'


If you are familiar with the classic Blogger tags $BlogItemPermalinkUrl$ and $BlogItemTitle$, I have used their equivalents data:post.url and data:post.title here. You could hotlink to other bookmarking sites also using these.

To all my readers

My feed burner stats showed 5 readers till Wednesday. Today it shows 25 readers! I believe I have attracted quite a few people to this blog with my quick hacks for Blogger Beta. Thank you all for your encouragement. Special thanks to Avatar of Bloggeratto and John at Freshblog for announcing my hacks.

If you have used one of my hacks, could you please write a small post about it in your blog so that your readers get to know about Hackosphere as well? If your blog is in some other language other than English, you are free to translate the information about my hacks to your language and provide a link to my blog.

Coming back to Beta addiction, here are some changes that I noticed:
1. If you have already switched to Beta and merged your Blogger account with Google account, you cannot comment in non-Beta blogs with your Beta account anymore. I had to create a new Blogger account just for commenting in non-Beta blogs. More details in this Blogger Buzz post.
2. They seem to have changed the label URL from to I will check out what this means and whether any new hacks are possible.

September 1, 2006

Latest Posts display in sidebar

Do you miss the Previous posts section after migrating to Beta? As you might remember, classic Blogger used to show previous 10 posts in any page. When somebody visits your latest blog post following a link from another blog, he had a chance to look at the titles of previous posts and read them if he likes. Good news is that it is still possible with Beta to display upto 5 latest posts from your blog in your sidebar. Here's what you need to do.

Blogger Beta supports showing items from any feed as a page element. So, you could show the post titles from your blog's feed in your blog itself! The URL of your blog's feed is
Goto your dashboard, Template->Page Elements and click "Add a Page element". Choose the Feed element and provide the URL that you collected in previous step. In "Configure feed" window, give an appropriate title (I gave "Latest Posts"). Save the changes and drag/drop your new element to wherever you want.

By the way, I am working on getting my pre-Beta hacks to work with Beta blogs. If you are new to my blog, you can expect a few more hack announcements in the coming days. If you would like to have a peek at my pre-Beta hacks, check out "Goodies to promote your blog" and "Related posts from your blog".

3-column templates for new Blogger

[UPDATE: I have released some 3-column templates with many of my other hacks built-in. Try them too.]

[Translations by other bloggers: Spanish, Malaysian]

I got a specific request from a blogger asking whether 3-column templates are possible with Blogger Beta. If you have a lot of items in your sidebar, you would naturally want 3 columns like him so that you can balance your items across 2 sidebars. I found that it is in fact easier to convert Beta templates to 3 columns than older templates. This is because the condensed form of template shown by Beta is easier to work with. In addition, once you add another sidebar, you can move page elements between the two sidebars easily using the Layout editor.

If you need a 3-column template for a new blog or just want to try 3-columns with a test blog, you can right-click, save one of these templates and upload it to Blogger. If you want to use these with your active blog, please note that it doesn't have all your widgets. So, you will have to add them again.

3-column Minima
3-column Denim
3-column Dotsdark

If you already have a functional Beta blog with some other template, here are the steps that you could use to convert your template to 3-columns.

Disclaimer 1: I am assuming that you have already played with CSS a bit.
Disclaimer 2: You may need to do additional adjustments in CSS like adjusting width, margin etc if one of the sidebars is pushed downwards. This instruction is just to highlight the general method of converting to 3-columns. As I don't have much free time nowadays, I may not be able to help you there.

1. Beta template has 3 CSS wrapper definitions as follows:
#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar.

Now, to insert a new column, we need to define a new wrapper, say #newsidebar-wrapper. Find the definition of #sidebar-wrapper, copy/paste and rename it to create this new wrapper.

2. These wrappers might have different widths depending on your template. We need to fix the widths of these 4 wrappers so that they appear as expected. I suggest setting the width of outer-wrapper as 750px, main-wrapper as 400px and each sidebar-wrapper as 150px (750 > 400+150+150).

3. We should also set the float property of these wrappers appropriately. i.e. if sidebar-wrapper was set as float:right, we should set the newsidebar-wrapper as float:left and vice versa (unless you want both of them on one side). Also, setting the left or right margin of main-wrapper ensures there's space between the new sidebar and the main column.

Summarizing, here is an example of settings:

#outer-wrapper {
width: 750px;
#main-wrapper {
width: 400px;
margin-left: 20px;
#sidebar-wrapper {
width: 150px;
float: right;
#newsidebar-wrapper {
width: 150px;
float: left;

In the definitions above, ... refers to all other properties within the wrapper.

4. Now that our CSS is ready, let's get to the changes needed in the body of the template. Find the div sections with main-wrapper and sidebar-wrapper and add the code in red either above or below the main-wrapper (i.e. if sidebar-wrapper is below, newsidebar-wrapper goes above and vice versa).

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

If you now goto Template->Page Elements, you will see two sidebars. You could move elements between them and add new elements too. Have fun :)

[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog -
2. AJAX-driven fast template - Neo]