Create a Custom Feed Reader with Blogger Blog List

by Elise Bauer

Have you ever wanted an easy way of showing a simple feed of your favorite sites within your blog? Blogger has a cool new feature called Blog List for Blogger blogs, and even if you are using Movable Type, or another blogging platform, you can make use of this Blogger feature to pull feeds into your blog.

Here’s what it looks like on my site – Simply Recipes: Food Blog Updates:

Which is driven off of this Blogspot page: http://foodbloglinks.blogspot.com/.

It’s very easy to set up. Here are the steps in detail:

1. Create a Blogger Blog. If you don’t already have a Blogger account, get one for free at http://blogger.com. Give your new blog a blog title that you want as the title of your feed section, like “Updates from Favorite Blogs”. Give the blog address anything you want. Choose the default “Minima” template. It will be the easiest with which to work. When you’ve created your new blog, click on “Layout”.

2. Add blogs to your Blog List. Click on “Add a Page Element” in the right sidebar layout section. Then look for the Blog List element, and click “Add to Blog”. Delete whatever is written in the title field of the popup. Click on “Add to List” and start adding the blogs whose feeds you want on your list, one by one. Select if you want to see the blogs’ icons, the titles of the most recent items, snippets of most recent items, and the date of the last update. If you want you can rename the feed titles (sometimes they’re a little long). Then click on “SAVE”.

3. Strip the Blogger blog layout of everything that isn’t necessary. Return to the Layout edit. Delete all of the sidebar elements except for “Blog List”. To do that, click on “edit” for each page element, and click on “Remove” in the popup.

Click on “Edit HTML”. Scroll down to #main-wrapper and change the width to 0. Change the #sidebar-wrapper width to however wide you want the feed text to be. In my case, I changed it to 600. Change the widths of the #outer-wrapper, #header-wrapper, and #footer to whatever your sidebar width is.

Remove the Blogger nav bar by adding the following code to the CSS (in the footer section):

#navbar {

   display: none;

   }

Click “SAVE TEMPLATE”. Now click on “Page Elements”. It should look like this:

If you click on “View Blog” you should see something like this:

You will probably want to change the header text into something that better suits your blog’s style. To get rid of the borders, click on “Edit HTML” and scroll down to #header-wrapper and #header. Change the border from 1px to 0px. Add header font color, size and type information to #header. Click SAVE TEMPLATE and view the blog.

For example,

#header h1 {
  margin:0px 0px 0;
  padding:15px 0px .25em;
  line-height:1.2em;
  text-align: left;
  color: #333;
  font: 20px Georgia, "Times New Roman", Times, serif;
  padding: 15px 0 0 0;
  padding-bottom: 1px;
  clear:both;
}

You can also change the default text colors and styles in the variable name section at the top of the Edit HTML template.

Review your published blog and take note of the URL.

4. Use an iframe tag to pull the Blogger blog into your regular blog. Open up your Movable Type (or other platform) blog edit. In Movable Type, create a new index template or page. If using an index template, copy over whatever header, footer, and sidebar code you will need to construct your page. In the main body of the template place the following iframe code:

<iframe src="http://yourfeedblog.blogspot.com/" width="630" height="2000" frameborder="0"></iframe>

Replace “http://yourfeedblog.blogspot.com” with the URL of your feed blog. Change the width and height to be appropriate for the space into which the feed is going.

Save and publish.

That’s it! As you add more blogs to your Blog List, you may need to increase the height of the iframe.