Transform a Blogger label into a page

Ever since Blogger launched the Pages feature, I wanted to add a label to the ‘Pages’ menu, effectively creating a mini-blog with the articles that have a certain label. The native widget doesn’t include this option. I have seen some Blogger-based blogs having something like this, but nobody seems to know exactly how to do it. So I decided to give it a try myself, by looking at the template HTML code.

It turns out that this is not that hard after all. The Pages widget is actually a small piece of code that loops through the static pages you created and generates a list of hyperlinks to them. All you have to do is add your own items to this list and the widget will reflect them accordingly. Of course, this is not limited to my special case of linking to a label; you can add pretty much anything here, for example you can pin a blog article without messing around with its publish date or a link to your Google profile.

As always, make sure to back-up your template before making any changes to it. After that check the box ‘Expand Widget Templates’ to begin editing the full HTML template. Search for the following line that marks the beginning of the ‘Pages’ widget:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

You can insert your own links after the main code loop closes, that is after the line </b:loop>. For example, to add a label page here you need the following code:

<b:if cond='data:blog.pageTitle == &quot;Fors: Book&quot;'> 
<li class='selected'><a href='http://exde601e.blogspot.com/search/label/Book?max-results=7' title='My book reviews'>Book reviews</a></li>
<b:else/>
<li><a href='http://exde601e.blogspot.com/search/label/Book?max-results=7' title='My book reviews'>Book reviews</a></li>
</b:if>

Naturally, the italicized text should be replaced with your own blog name and labels. And the fragment ?max-results=7 is optional; it just forces Blogger to display only 7 articles for the label, making it consistent with the rest of my blog. You can change the number to anything you like or need.

This code also takes care of highlighting the page title when somebody visits it to closely match the look of a native page. If the template doesn’t use that option, or if you are linking to an external page, you can remove the conditions from this code and simply use a hyperlink inside a list tag. The only thing missing now would be to replace the general RSS feed of the blog with the feed for the label on this sub-page, but I haven’t figured out how to do that for now.

Unfortunately the method described above has a small disadvantage: because of the way the ‘Pages’ widget is built, you can’t add custom links between the regular pages, only before or after them. So if you use this hack on your blog, the manually inserted links will be displayed either on the left or on the right side of the other pages in the widget.

An alternative would be to use the method described here. It uses the standard Blogger feature, so you can place the newly created page anywhere in the widget, but doesn’t show the full articles and requires the use of third-party tools like Google Analytics and FeedBurner.

Update: If you are interested in adding the label-specific feed to this custom page, I discovered in the mean time a method to do this, as described in this follow-up article: How to add label-specific feeds to Blogger.

Update: With the redesign launched for Blogger in Draft, there is now a built-in method to add custom links to the ‘Pages’ widget, without manually editing the template. I described it in a follow-up article and I recommend to use it instead, it makes the process much easier for everyone.