tins ::: Rick Klau's blog

Adding a “Best of” page to Blogger

Visitors to the site will now see a new tab towards the top called “Best of” and I thought I’d document how I’m doing it in case others want to do the same.

A couple of weeks ago I saw a blog have a link to a “best of this blog” page, which I thought was a great idea. For new or infrequent visitors, it was a great way to introduce the visitor to the content that the blogger was particularly proud of. I’ve been thinking about that periodically, and today decided to take a crack at implementing something similar on Blogger. Here’s what I did:

Identify my favorite posts: I have posted nearly 3,000 posts in the last 8+ years, so there’s a lot of content to weed through. Rather than manually sort through, I used a short-cut: Google Analytics can tell me which pages have been viewed the most over the last three years. That was a good starting point:

Google Analytics – most popular posts

I also used the Blogger post editor to navigate through a few of the categories where I tend to do more thoughtful posts:

Blogger – posts labeled Business Strategy
Add the “Best of” label to all selected posts: Once I found the posts I wanted to share, I added a new label to the posts through the Blogger post editor:
Blogger – add label
Get the feed for the “Best of” label: Every feed on Blogger has associated Atom and RSS feeds (here’s the help page that shows you how to find them). I grabbed the feed from the “Best of” label, and added it to FeedBurner.
Enable BuzzBoost for the feed: For those that don’t know, I worked at FeedBurner for several years (our acquisition by Google is how I came to join Google). I remain a fan, and love when I have an excuse to use one of my favorite FeedBurner features. (I’ve written about it several times, here’s one example.) BuzzBoost takes an RSS or Atom feed and converts it to JavaScript – perfect for what I needed. I turned BuzzBoost on and configured it to show all items:
BuzzBoost configuration
Once on, BuzzBoost gives you a line of JavaScript that you can insert on any HTML page. So I took that over to Blogger, where we put it all together:
Create a “Best of” page on Blogger: Click “Posting | Edit Pages” and then create your new page; once in the post editor, click “edit HTML” and paste in the JavaScript from FeedBurner:
Add in BuzzBoost to new page
Click “Publish page” and you’re all done. Since our Pages widget (if added to your layout) auto-creates tabs on your blog, you’ll now have a new tab that points to your “Best of” posts… and as you add the label “Best of” to other posts, they’ll automatically show up in this page.
A few notes about the process:
  • Yeah, this is a bit of a kludge. I’m happy enough with the results, but it sure would be nice to have this be a native feature in Blogger. Will see if I stick with it, and if enough other users ask for something similar to add it as a feature down the road.
  • You can do multiple pages like this, whether it’s for specific labels or combinations of labels (there’s nothing to prevent you from putting multiple chunks of JavaScript on the page). But note: every bit of code you put on the page risks slowing things down, so be judicious here.
  • The new photo uploader in Draft is righteous.

Let me know what you think!

6 responses to “Adding a “Best of” page to Blogger”

  1. Avatar
    Anonymous

    @ RickSimply awesome! Will implemnet soon in my blog the best posts link..Between my blog with BLOGGER just completed 3 successful and facinating journey!Perhaps, as blogger has been in a very giving phase..I have a request…Can blogger introduces the “READ MORE-insert jump break”…which is Automatically done to all the post with 100words limit and a picture at side!Manually is good but automatic version can be much better one and easy to implement to all the posts at ones!~ Something just like we see in our DASHBOARD the blogs following Reading list…with teaser and tiny picture!Please introduce this!Warm Regards!~Rachana ShakyawarBlog: http://rachanashakyawar.blogspot.com/~Keep the Spark Alive..

    Reply
  2. Avatar
    Anonymous

    Interesting idea! And you may put two columns with two labels using divs like this:[div style=”float:right; width: 45%;”]content of 1st label[/div][div style=”float:left; width: 45%;”]content of 2nd label[/div][div style=”clear: both;”][/div]I use [] instead of . I've just tested this and it was amazing!Great idea indeed.

    Reply
  3. Avatar
    Anonymous

    This is cool Rick, but aren't you pretty much done once you've added the “best of” label? I've been doing this for awhile myself, sending the label link to clients to show them just posts labelled “video”, etc. That being said, BuzzBoost is awesome.

    Reply
  4. Avatar
    Anonymous

    I have tried may a times…but it just not happening…all the recent posts show up but not the list that is with a particular label asked!Kindly Suggest

    Reply
  5. Avatar
    Anonymous

    Another way but to show up in the sidebar… See on GA as Rick explains and add a label Best of or whatever. Use the Blog List gadget, set no icon, the other options as you wish, and then add the label URLs feeds (yes, plural), example:http://tins.rklau.com/feeds/posts/default/-/Blogger/?start-index=1http://tins.rklau.com/feeds/posts/default/-/Blogger/?start-index=2http://tins.rklau.com/feeds/posts/default/-/Blogger/?start-index=3http://tins.rklau.com/feeds/posts/default/-/Blogger/?start-index=4http://tins.rklau.com/feeds/posts/default/-/Blogger/?start-index=5 (10 is enough…)If you don't like to show the blog title, in the CSS add a few lines over the line ]][/b:skin] –[] instead of :.blog-title {display:none;}But if you already use 1 or more Blog Lists, search on the template the ID number of this new blog list. So add the correct ID number (1, 2, 3..)#BlogList1 .blog-title{display:none;}Ask to Rick how he hide the label Best of 😀

    Reply
  6. Avatar
    Anonymous

    Hi Rick!Now that Blogger launched a native 'Popular posts' gadget, it there any way to use that in order to build the 'Best of' page? Something like a script that powers the gadget, or simply embedding it in a static page?Thanks!

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.