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.

36 comments:

Anonymous said...

Ha ha, sweet! Another nice one!

Avatar X said...

yes sir, i like it.

And ElDude beat me to comment, um i wonder if he is also mexican?..

hey carnal,de donde eres? ;)

Anyway, keep the good work making us look like Slackers.

Clyde said...

dint work for me buddy

Anonymous said...

Ramani... Ur the man!
:O)

Unknown said...

eldude, avatar, KCA, thanks!

friedcycle, I'm surprised why it did not work for you. can you send me the portion of template which you changed?

Ricardo Santos said...

Thanks RamaniThanks Ramani

Ricardo Santos said...

Ramani, i read at freshblog that you managed to set up a recent comments using the comments feed, but all i get is the title of the blog and a error message saying "Please correct the errors on this form."

i switched to beta today but im stiil using the classic mode untill i figure this one out.

What am i doing wrong

for get the comments feed i use:
http://beta.blogger.com/feeds/blogID#/comments/full

i did replace the blogid with the correct number . Thanks

Anonymous said...

Ramani,

Sorry to treat you as you were paid by Blogger, but do u have any idea how can i make the post comments appears in the main page, as the old way?

Unknown said...

Ricardo, KCA, unfortunately blog comments feed doesn't work for migrated blogs, but works for new blogs created in Beta. Maybe because migrated blogs have old posts created with pre-Beta template.

But per-post comment feed works fine. So, you can use the Feed page element to show latest comments on a particular post. Like i have done in my sidebar.

KCA, we hackers need ideas. So, consider me as Blogger employee and keep your ideas flowing.

Avatar X said...

Ideas?, ummmmmm.

Anonymous said...

absoluting flawless! thanks for the hack, it worked like a charm.

Unknown said...

Thanks Michael. I am happy that it worked for you.

Anonymous said...

Ramani, hi,

Basically the comments are displayed on the item page, and I want to displayed also on the main page, as usual, under their respective post.

Do u have any idea how it can work with beta blogger?

See on my old blog, i you don t understand my bad english..:O)

Hoc Tro Viet said...

Hi Everyone,

First, thank you Hakosphere for posting this great hack! I love it! But I found that I didn't like the dates above them, and also the double br tags. So after hacking for a while, I got it to not show up the date, and the ul tag is quite simple.

Here is the code of my hack, and you can see it live here:

hoctro.blogspot.com

Sorry for the site being in Vietnamese, for that is my targeted audience. But "Lưu Trữ" means "Archived", and "Thể Loại" means "Labels", and you can see they show up in bullet lists.

I'll attempt to post the code here, if it's not work please check back on my site later cause I intend to post it for everyone to use.

<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<!--Improved hack from Hackosphere By: Hoctro http://hoctro.blogspot.com - 6 Sep 2006 -->
<!-- This hack allows posts to be shown without dates and as a bullet list -->
<ul>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
<!-- <b:include data='post' name='post'/> -->

<!--Hack by Hackosphere - 6 Sep 2006 -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<li><a expr:href='data:post.url'> <data:post.title/> </a></li>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--End of Hack by Hackosphere - 6 Sep 2006 -->

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</ul>
<!--End of Improved hack from Hackosphere By: Hoctro -->
</b:loop>
</div>

Unknown said...

Hoctro, that's a nice improvement. If you writeup on this, I will add a link in my Hacks from neighborhood section.

Hoc Tro Viet said...

Ramani,

Thank you for replying to my earlier post. You're the man! I thought of this ever since Beta Blogger released it's HTML Editing capability and I wonder" How'd I come about doing this?" I came across your site yesterday, and "Bang!" You gave me the answer :-)

Here it is, the write-up ofmy first hack which based heavily on your original hack :-)

http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-archived-or.html

Unknown said...

It worked perfectly. So much better than having to scroll through all those long posts trying to find what you want. I felt so bad for readers to have to try and contend with that. You're the greatest!

Unknown said...

Jane, thanks. check out my latest post also. I have a way of overriding the 20 post limit.

Anonymous said...

I am little bit behind, but I still got it, Ramani. I think I will proceed to the next step. Thanks, you're my angel.

Gavin Millynn said...

Hi Ramani,

Great site, and I love this hack, so much so I put in on my front page. I have a problem however. My blog no longer displays post-labels, which includes your del.icio.us and digg hotlink hack :). Is there a quick fix for this?

Thanks,

Gavin.

Unknown said...

Gavin, I would suggest you not to use peek-a-boo for main page because it doesn't show any of the footer elements like labels etc. The visitor has to go to post page to see them. This hack is mainly for label/archive pages.

Unknown said...

Can you help to convert my blog's template to Beta? Thanks.

Unknown said...

Leon, it is not possible to just convert to Beta. You have to get the invitation from Blogger for that. If you have not yet got it, you can create a test blog and try the hacks.

dro said...

hey, i suspect this is probably not the place for this question, but since all hacks i found here are super creative and very convenient, i thought i could get some help from you ;)

my blog is on http://peshko.blogspot.com and it's in beta. i've been trying to modify it so that all texts, labels, tabs, links, etc. are in bulgarian (mother tongue).

see where below the post there's Labels:bla bla bla, and then below this - a new word followed by the same list of labels?

i want to remove Labels:... and be left only with the lower row. can i rely on you? ;)

thank you!

dro said...

hey, me again ;)

sorry for spamming, but i realized i can do without labels. besides, i read that blogger beta doesn't support listing labels in the sidebar - true?

if yes, then i thank you anyway, but do not bother to try and solve my petty problem ;)

regards.

Hotels said...

hi beta blooger is very good options.

can pls tell me how can i display post title as a page in item page in beta blogger?

SCC English Department said...

Hi, this looks great but I'm struggling to get it right. I think I've followed the instructions but then get an error message which reads :

We were unable to preview your template
Please correct the error below, and submit your template again.
More than one widget was found with id: LinkList1. Widget IDs should be unique.

Would be grateful for some guidance. Thanks!

www.sccenglish.blogspot.com

Unknown said...

As it explains, you have duplicate widget names. In page elements tab, find them and change one of the names.

SCC English Department said...

Thanks, Ramani. I tried this, and didn't get the error message any more, but then none of the label or archive links worked at all. The relevant part of my code is different, I think. But I've tried to copy into this box, but can't send it because the error message is telling me 'Your HTML cannot be accepted. Tag is not allowed' - and then quotes my code, which I can't post here! So all I can do is say is that the first line of my code has 'true' instead of 'false'

I wonder if there's a problem because I've disabled comments?
Sorry if I'm being a pain with this - not an expert on code, as you can see!
Thanks a lot

Unknown said...

Can you send me an email with the relevant code? (rarunachATgmailDOTcom)

Attila said...

Am I correct in concluding that this doesn't work for migrated blogs still using old templates?

Unknown said...

yes, it only works for new templates.

Jessi said...

hey ramani! havent been by in a while, and the blog looks great! i did the label drop down and peekaboo a while ago, and something is weird. i tried backtracking or starting over, and i cant figure out where i went wrong? any suggestion? thanks!!

Ken Lai said...

"New hack to improve your label/archive pages" in Chinese

Anonymous said...

PLEASE HELP ME WITH THIS HACK!

I do exactly the same what you said, but there's a small PROBLEM.

The list shows not realy in the main.

I think it's not a real big prob and you can suggest me a fix.

Screenshot of the problem:
http://img216.imageshack.us/img216/2124/asfh2.jpg

P.S. my blog is a 3-column (sidebar-main-sidebar)

Mig said...

I just came accross this...very cool. Does this work if you publish the blog via FTP? I have the blog redirected my to my personal site but I suffer from the same problem...there are way too many articles. Any help would be great.