« MultiBlog and Upgrading to MT4 | Main | Learning Movable Type is Up Again! »

Create a Custom Feed Reader with Blogger Blog List

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:

updates-screen-shot.jpg

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".

config-blog-list.jpg

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:

page-elements-2.jpg

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

favorite-blogs-example.jpg

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.

Comments (7)

A brilliant tutorial Elise, I've been wondering for a long time how to do this. I tried using an RSS Reader Widget for the MT Community News, and although it worked great, I had little control over the display. This way the feeds fit nicely into the blog style. It's a shame that you can only get one post at a time though for each feed.

Elise, thanks a lot for this tip. I had been thinking about how to do this for some time, but given that I am a relative idiot about RSS feeds I couldn't have figured out this trick. Thanks again.

Cornelia:

Is there a way to setup this on an INTRANET, instead, of having to go to Blogger to do this, since our internal blogs won't be accessible by blogger.

Maybe, if you host the Blogger blog instead of having Blogger host it.

Great tutorial Elise - this was probably the single most valuable takeaway from your presentation at BlogHer yesterday. Well, that and the font size comment! Thanks for making this trick easy to understand and implement.

Great tips .
thanks for post.

Mark:

This is Awesome. I do not like the display of any reeders. Google would be great but I cannot stand the box in the top left corner. And although there are skins, none of them are great either.

The next best thing would be to be able to have a quick add in your browser toolbar to save the links to your blogroll.

Thanks I digg this post and will give it a try.

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)