April 24, 2011

a more elegant way to create label-specific pages in Blogger

In a previous post, I explained how you could move the Labels gadget to the header and therefore simulate label-specific header tabs in Blogger.  But in that scenario, you're not really creating a "real page."  Here's a more elegant solution-- requires a few more steps, but it works well.  The following tip comes from: http://tins.rklau.com/2010/03/adding-best-of-page-to-blogger.html

There are three main steps to doing this:
  1. Create the label in Blogger and find the feed for the label
    1. Create the label you're interested in-- for example Announcements
    2. Add this label to all the posts you want to show up under Announcements
    3. Get the feed for "Announcements": every label in Blogger has a specific feed associated with it (see this post).  It should look something like this: 
      • http://name of your blog.blogspot.com/feeds/posts/default/-/the label you're interested in.  
      • In this case, we're interested in Announcements so it would look something like this for this blog: 
      • http://techtipstoremember.blogspot.com/feeds/posts/default/-/announcements 
        • (keep in mind I have no such label in this blog so there will be no such feed if you try going to that address)
  2. Prepare the feed in FeedBurner & retrieve the code
    1. Go to FeedBurner (FeedBurner now belongs to Google so your Google Account should give you access to it)
    2. Add the feed url from Step 3 and burn the feed
    3. After burning the feed, you have enable BuzzBoost in FeedBurner which gives you a JavaScript code that can be inserted into any HTML page; since I had to search for how to do this, here are the instructions (can also be found here):
      • In FeedBurner dashboard, click the Publicize tab
      • Choose how many posts to display
      • Give your posts a title (or use the default); you may also choose to not display a title-- I like this option since the page you'll create already has a title.
      • Decide whether you want the full HTML post or just text
    4. There's a box that says something like "Your BuzzBoost is Ready" with code inside
      • btw, if you ever want to change the code, I found that it works better if I also change the date or another feature and then click Save at the bottom, otherwise, the code doesn't seem to update
    5. Copy the code
      • yet another tip from here.  If you want to remove the FeedBurner image that shows up at the bottom, add the following code:
      • #creditfooter
        display: none;
  3. Create and add the code to a Blogger page
    1. Go back to Blogger
    2. In Posting section of the Dashboard, Add a New Page
    3. Switch to HTML editor and paste the code
    4. Save the page and you're done!

No comments:

Post a Comment