Recent Comments and Recent Posts Widgets

Recent Comments Widget

Adding a Recent Comments widget into your sidebar is a way of acknowledging the readers' feedback and giving their comments a prominent place in the main page of your Blog. It also makes it easier for them to check for replies to their questions and for other readers to follow up on topics which they may find interesting. This widget is especially useful if you have numerous comments to your Blog posts. As part of our writeup, we shall also explain how you can remove the “nofollow” tag in the Comments section of the template so as to allow the links in these comments to be visited by search engine spiders.

While we can use JavaScripts to call for the comments, we would rather not do so because the widget will not be displayed in many browsers that disable the running of JavaScripts. We shall therefore suggest using the feed widget method to display these recent comments.

Update: For those who want to use the JavaScript method, refer to our article Recent Comments Feed Widget.

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.



Go back to Template -> Page Elements -> Add a Page Element in your sidebar and select “Feed”. You will be prompted to enter a Feed URL. The Feed URL we entered is this:-

http://tips-for-new-bloggers.blogspot.com/feeds/comments/default

This is the Atom Feed for the Blog comments. You can alternatively insert the RSS Feed for Blog Comments as follows:-

http://tips-for-new-bloggers.blogspot.com/feeds/comments/default?alt=rss

Change the portion (in red) to the URL of your own blog. Once you have entered that, this is what you see on the screen.



Insert a Title. The maximum number of links shown in a feed widget is 5. This is a limitation in using this method. But we think it is acceptable and having too many recent comment links may clutter the sidebar. You can decide whether or not to display the dates and name of the authors. When you are satisfied with the setting, click to Save the Changes. Drag and drop the widget to the relevant part of the template and Save the Template.

Nofollow attribute in Comments

If you have had your blog up and running for a while, you may have come across comment postings in your Blog which are plain advertisements of their own blogs. They usually include hyperlinks to their Blogs so as to raise the profile of their sites in search engines. While there is technically nothing wrong with that, your readers may be annoyed to have to sieve through a list of “irrelevant” comments just to seek an answer to a point in the posts. Many Bloggers detested such practise and labeled this act as “comment spam”. Google did not like it either, and introduced a standard “nofollow” tag to all Blogger.com blog comments. It literally tells the Google search spider to ignore all the hyperlinks in the comments. Hopefully, this will deter the spammers who now receive no search engine ranking benefits by putting their Blog links in the comments.

As a Blog owner, you can decide whether you want to remove this attribute. The advantage of removing it is that you will encourage more readers to post comments since the search engines will crawl their sites if they post their Blog links in the comments. The disadvantage is that you may have to deal with constant abuses of this system.

If you want to remove the “nofollow” tag in the Blog comments to allow search engines to crawl the comment author's links, go to Template -> Edit HTML and check the “Expand Widget Templates” box.

Scroll to these lines (you can search using Ctrl-F in most browsers) and remove the parts (shown in red):-

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/>

And

<dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'>&#160;</span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

Save the template.

Recent Posts Widget

One way to let readers locate the recent posts is to have an “Archive” page element in the sidebar. It sorts the articles by dates. However, it is not ideal for those who do not have active Blogs or any new post in the last couple of months. These people may want to display the links to recent posts, regardless of the dates. Even if you have an active Blog, regular visitors may want to view your recent posts only, and a link widget showcasing these recent post links would be appreciated.

Again, the Feed widget method seems to be by far the easiest to adopt. Just like before, go to Settings -> Site Feed and switch to “Advanced Mode”. This time, see that “Blog Posts Feed” is set to either “Short” or “Full”. Do not choose “None”. If you have an external feed address through Feedburner, Feedblitz or any other service, you can enter that Feed URL so that all feeds will be redirected to that address. Save the Settings.



To insert the Recent Posts widget, go back to Template -> Page Elements -> Add a Page Element in the sidebar and select “Feed”. You will be prompted to enter a Feed URL. If you do not have an external Feed address, the URL to enter is this:-

http://tips-for-new-bloggers.blogspot.com/feeds/posts/default

This is the Atom Feed URL of your Blog Posts. Instead of the Atom Feed, you can insert the RSS Feed URL as follows:-

http://tips-for-new-bloggers.blogspot.com/feeds/posts/default?alt=rss

In our case, for example, we have an external feed address at Feedburner and instead of the above address, we keyed in:-

http://feeds.feedburner.com/TipsForNewBloggers

Change the portion (in red) to the URL of your own blog. Once you have entered the Post feed address, you can change the variables such as Title, number of links to display, dates and author names.



Save the changes. Move the element to the preferred part of the template and Save Template.

Customize the Widgets

To differentiate the Recent Comments or the Recent Posts widgets so that they do not appear to be ordinary link widgets, add some dynamic effects to these links. We gave some examples of the various styles in our article on Links - Hover and Rollover Effects.

After creating your widget, go to Template -> Edit HTML and scroll to somewhere near the bottom. You will see something like this:-

<b:widget id='Feed1' locked='false' title='Recent Comments' type='Feed'/>

The ID Feed1 is what we need to know. As you create more feed widgets, there will be more IDs like Feed2, Feed3, etc. We can create style definitions for each of these widgets.

Back at the top of the template, you see a list of links and hover styles like this:-

a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; }

We can insert after that another set of rules for the Feed1 widget. For example, we can insert this:-

#Feed1 { background: #ffff66; } #Feed1 a:link { color:#4CC552; } #Feed1 a:visited { color:#6D7B8D; } #Feed1 a:hover { color:#F88017; background: #E3E4FA; }

Our widget will have a background color yellow (#ffff66). The links are green in color (#4CC552). Visited links turn grey in color (#6D7B8D). When the mouse hovers over the Recent Comments link, it appears orange (#F88017) with a lavendar backdrop (#E3E4FA). Try different combinations and styles by inserting various color codes from our Color Code Chart. Always “Preview” the template to view the changes. Save the template only when you are happy with the outcome.

Further reading:-

Check out more widget ideas that you can add to your sidebar in our Blog Widgets, Gadgets and Add-ons guide.

© Tips for New Bloggers