Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 15, 2007

Digg This Story

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.

Recent Comments and Recent Posts Widgets

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.

Recent Comments and Recent Posts Widgets

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.

Recent Comments and Recent Posts Widgets

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.

Recent Comments and Recent Posts Widgets

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

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

35 comments:

BlogmasterPg said...

Hi, I profit too fast of this thing. I done the same thing in My GEMINILION , but I didn't publicised it. I'm doing as experiment and the comments will write naturals. My fear is someone tell to Google that one and Google can takes provediments, I know. Do you informed about this thing? They can change you pr to 0!!. Owever, I leave my comment ( and i think it not will be the only one! BlogmasterPG

bizwhiz said...

Hi Blogmasterpg

Are you talking about the "nofollow" tag? I see it more as a service by Google to help blog owners reduce comment spams. Thus far, there seems to be no rule against removing that. If I find any, I'll post it here.

Toni said...

I followed your instructions for adding recent comments but it doesn't seem to be updating.
I read where blogger was suppose to fix this. Do you know if they did or does it take awhile for comments to appear or did I do something wrong.

thanks for any help you can give me.

Toni said...

ok I added ?alt=rss to the end of the feed and that helped and updated the recent feed comment.

Not sure why that seemed to help but it did

bizwhiz said...

Hi Toni

That should work too. One is an Atom Feed address and the other is the RSS Feed address.

The Beading Gem said...

Thanks! I searched for a simple method of adding comments and yours has been the most straightforward explanation of how to do it. Keep up the good work.

suhas D said...

I tried to follow the first methods for the feeds . I have switched to the feedburner ...

but in the result I got only dates and name of the commentator .. but not the actual comments ...

this is wht i got

# - Aug 25, 2007 - suhas D
# - Aug 23, 2007 - ajit
# - Aug 23, 2007 - Anirudh
# - Aug 23, 2007 - Anirudh
# - Aug 23, 2007 - Shilpa

I don't understand wht is the problem .. help me if possible ..

vinceandcarlaplus said...

your blog has been very helpful. Yup the recent comments feed doesnt seem to be working. However when I use a different reader ie. googlereader - using the same feed address - it still works.

I suspect its the feed reader app of blogger is the problem.

bizwhiz said...

Hi suhas D

Yes, readers told us yesterday about the comments feed. While you can read the feed as vinceandcarlaplus said, there are no separate links to each post comment. We are not sure if it is a temporary problem and as mentioned in our note, we will post updates to the article.

Nynther said...

Just what I want. Thanks a lot, it was very helpful. Keep up with the good work!

suhas D said...

thnx a lot for replying ..
I ll be looking for updates

Eann, Daddy & Mummy said...

Hi bizwhiz,

I really learn a lot from your blog, it is very informative. Keep it up.

I've a question, how do I change someone url in my comment to text form instead of link form? It seems like I cannot edit someone comment in my comment moderation section.

Hope you can help.

Thank you very much.

bizwhiz said...

Hi Eann, Daddy & Mummy

No. You cannot edit other people's comments. You can only allow the comments or reject them.

Max said...

Hi there, Superb blog. I learn a lot from your blog.

I recently used recent post feed. But the problem is my posts are not updating. I request you to have a look at my website www.intradayteam.com its in blogger. I have 3 other sites in blogger, i want to create a feed of all the three sites in one blog (ofcourse in different sidebars ). So i tried your method.

Because of this problem, i have to clear my cookies and cache manualy in internet explorer and mozilla, everytime i visit the site. Its not updating automaticaly. I tried all the settings in mozilla firefox and internet explorer but its not working. All the others sites are fine with my browsers.


Pls help.

bizwhiz said...

Hi Max

I assume you have entered the correct feed addresses. Test by keying them into your internet browser. You should be able to view the post feeds.

There is no problem having all the different feed widgets in the same page. In IE, under Internet Options -> Browsing History settings, the browser can be configured to check for newer versions of the stored pages every time you visit the web page or automatically. If there is updated material, it will show, without you having to clear the browser cache.

Max said...

Thanks for your reply. I tried all the methods mentioned by you, but still its not working, Whenever i refresh my website using ctrl + F5 i can see the updated material. I dont know what the problem is. May be my ISP have a problem with cache.

One more request to you. I searched all the site but did not find any post regarding a flash file in blog header. As you are master in blog we can expect such thing from you. If you look at my site www.intradayteam.com i tried to put one flash file in header, but still am facing many problems. so am waiting for your new article on this. Its just a request.

Thanks for support.
Max

XIK Sony Agent Hunter-X- said...

Hey again bizwhiz! I just wanted to ask about this how could I make it so one of my tags/labels shows... Such things as hottest news or breaking news to be displayed like this? How can I do that? Thanks

Max said...

well i got the solution for my problem.

I added this code between head section in edit html mode.

'meta equiv="Pragma" content="no-cache"/'

(replace ' with < and > )

And now everything is working fine. All the post widgets are updating automatically. Found the solution while googling.

Hope this will help others too.

Thanks

nichada said...

I have a private blog which I share with a group of friends, can the "recent comments" instructions work for me? Thanks!

tashfeen said...

hi, your site is cool and very useful too. however, my recent posts widget isn't updating. i haven't made any mistakes in the steps you've mentioned either, and i've tried using rss instead of atom for my source feed.

HELP!

sincerely,
t.

Anonymous said...

Hi and compliments.
I want to create a list of ALL posts of my blog, and put it in the sidebar, and if possible, with an alphabetical order. How can I do this?
Thanks

JS

OOM said...

Interesting stuff, we'll need to implement this into our blogger blog.

Kimsta said...

Thanks Mate! This is Excellent. Keep up the good work.

rumah351c said...

Hi, thankyou very much for your tutorial

Manders said...

Not sure if this was a one time thing, but in order to add my recent comments withough using RSS I had to place a "#" after "default" in the link, for instance instead of:

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

I had to put:

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

Hope this helps others...

sylvesteR said...

Hiya, I've been trying to customize the way my recent comment widget looks, as in trying to place an icon beside the start of every single comment by modifying the javascript file but no to avail. I've tried using the document.images command but it doesn't seemed to work. Could you guys lend me a hand? Thanks in advance!!

Эльвира said...

I replaced the address with own one but could not find any screen with title and comments number. I know I did smth wrong, but what?

entertainment ground said...

This article was a great help to me, thank you so much.

Jess said...

Hi!
I have successfully installed the "Recent Posts" widget, but now I have a problem.

When I change the title of one of my posts, the title listed in the "Recent Posts" doesn't simultaneously change.

So, I tried to delete the complete post and then posted it again with the new title, but the link of the title of the old post which I have already deleted still appears.

is there a way to solve this problem? I hope, you can help me!!!

Regards,
Jess

Paint Me Gorgeous said...

Thanks for the tips!

Bloggermania said...

wow thumb up brow... finally ive done in creating my feed comment :) check it out brow... http://yeheeey.blogspot.com thanks for the help

amoi said...

this tutorial is really help...
i have implemented in my blog...
thanks a lot :)

http://amokika.blogspot.com
http://malaysiadiaries.blogspot.com
http://sap-abap-faq.blogspot.com

amoi said...

i got same problem with Max...my recent post are not updated...but i can view it using google reader...you can see my blog http://amokika.blogspot.com

thanks a lot

AsSphere said...

thank you man.. keep up the good work.. u just like a teacher for me..

DirtDigger (Tessa) said...

Hi,

I tried to follow your instructions and it is not working. Not sure what I'm doing wrong. enter the code (changing the name to my blog name) and it says invalid url. I tried both rss and atom- can you help?

Tessa