The Blog Doctor.

FEED WIDGET (EASY) METHOD

Blogger has the feed widget which you can add to your blog like any other page element. Blogger also puts out post, label and comment feeds. Combining these two we can construct a Recent Comments widget by pasting the URL of your blog comments feed into a feed page element.

To do this login to Dashboard of Blogger and click on Layout link for your blog. This will open the Page Elements subtab of Template tab. Click on 'Add Page Element' link in sidebar. In the popup window click on Feed widget. In the Feed page element window paste the comments feed URL of your blog which is :

http://YOURBLOGNAME.blogspot.com/feeds/comments/default

Instead of 'YOURBLOGNAME' put actual name of your blog. Choose the number of comments you want to show. The maximum is five at present and OK it. View Blog.
If you want to show comments only from one post put this URL in it :

http://YOURBLOGNAME.blogspot.com/feeds/THISPOSTID/comments/default

Replace the CAPS.

To get your post ID login to Dashboard and click on Posts. Click on Edit link of the post you want or place your mouse cursor over the link and look at the status bar of your browser bottom left hand corner. (Enable status bar from View--->Status Bar menu of your browser.) You will see something like this :

http://www.blogger.com/post-edit.g?blogID=xxxxxxxxxxxxxxxxxx&postID=7938018824060714868

Copy down the number after postID and paste it in your comment feed url. You will then get the comments from this post only. The disadvantage of this method is that you get five comments only. The advantage is it is easy.

The FEED-TO-JAVASCRIPT (GEEK) METHOD

This is the second method and it is slightly more complicated. It enables you to have much more than five comments in your widget and also to customize it in the colors you want. It also includes a NOSCRIPT tag in case the viewer has Javascript disabled in his browser.

This method can also be used to add content from your other blogs or any other site which puts out a feed to your blog. Since the new Blogger layout templates do not have a Previous Posts section in the sidebar like the Classic Blogger templates you can use this method to add it.

For this go to http://www.bucks.edu/feed/build.php. In the URL field enter the url of your blog's RSS feed which is :

http://yourblogname.blogspot.com/feeds/comments/default?alt=rss

Substitute actual blog name in place of yourblogname. Verify the URL of your feed before using this form. You can do this by opening the above URL in your browser. It should show all your blog posts. If not check Settings----->Site Feed in your blog and verify that it is set to Short or Full.

Then selct the settings you want :

Show channel? (yes/no/title) Display information about the publisher of the feed (yes=show the title and description; title= display title only, no=do not display anything)

Number of items to display. Enter the number of items to be displayed (enter 0 to show all available)

Show/Hide item descriptions? How much? (0=no descriptions; 1=show full description text; n>1 = display first n characters of description; n=-1 do not link item title, just display item contents)

Use HTML in item display? ("yes" = use HTML from feed and the full item descriptions will be used, ignoring any character limit set above; "no" = output is text-only formatted by CSS; "preserve paragraphs" = no HTML but convert all RETURN/linefeeds to
to preserve paragraph breaks)

Show item posting date? (yes/no) Display the date the item was added to the feed.

Target links in the new window? (n="no, links open the same page", y="yes, open links in a new window", "xxxx" = open links in a frame named 'xxxx', 'popup' = use a JavaScript function popupfeed() to open in new window)

After selecting the settings you want click on Preview and check to see that content from your blog is being displayed. Then click on Generate Javascript button. Copy all the code. Login to your Dashboard and click on Layout. Click add Page element link in sidebar and choose Html/Javascript option. In the popup window paste the code, give it a Title and OK it. View Blog. See picture below :

Click on picture to enlarge it. Number 1 Feed is using the second method and shows much more comments than Number 2 Feed which has been added using the Blogger feed widget. To add a page element to the posts column you will have to alter the code as shown in 10 Quick Tips for Smarter Blogging.

STYLE THE FEED WIDGET

You can change the colors of the feed widget added using the second method above. To do this go to Template------>Edit Html and scroll down to your sidebar code for the feed widget. It will look something like this :

<b:widget id='HTML5' locked='false' title='RECENT COMMENTS' type='HTML'/>

Look for the number id of the widget. In this case it is HTML5. You will use this to add code to CSS part of your template to style the widget. To do this add this code just before ]]></b:skin> tag in your template :

#HTML5 .rss_item {
padding:.5em 0em 1.5em;
width:500px;
}
#HTML5 .rss_items {
margin-left:5px;
}

The CSS classes are :

.rss_box defines the bounding div for the entire display- use to define borders, fill, etc.
.rss_title the title of the feed and link style if displayed. Use with variants of rss_title a:link, rss_title a:hover, etc for rollover styles
.rss_items defines the unordered list <ul>...</ul> for the feed items- use to define the padding/margins for items.
.rss_item display of each feed item description and title, <li>...</li> as well as the channel description, if displayed.
.rss_item a: variant for the item title and link style
.rss_date defines the display of item posting dates

Just add your widget id before the clases above which represent the elements in the feed.