Scrolling Comments on Blogger - A Tutorial

A fellow blogger (Hayley), who found my tutorial on how to setup a Scrolling Blogroll on Blogger (that you can edit), requested for a tutorial on how to setup Scrolling Comments for Blogger. After a couple of testing, I successfully got it working.

You can check this out in action at my testing area or go ahead and check the comments section at Hayley's photoblog (she takes amazing photos, btw).

This is extremely useful for people who want their pages to be compact or for those who use a very tight blog theme or layout.

So, how do you configure your comments section to scroll? Well, we might not have the same lines of codes in our templates as we use different ones. But, it's easy to find what you need to edit. Here's how to do this...

Step 1:
Make sure you save or backup your current template first.
Layout -> Edit HTML -> Click on Download Full Template link.
Save it anywhere on your computer, just in case there's an error when you try to implement this.

Step 2:
Look for this line of code on your template:

id='comments-block'

Most probably, you'd find 2 sets of this code. Now, look for the one that doesn't follow any code that has BACKLINKS in it.

For instance, on my blog's template, I found 2 sets of id='comments-block', highlighted in yellow:

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<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'>

AND this one:

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

So, the one that I need to edit is the one that doesn't follow any backlinks code (check the codes in red).

Step 3:
Simply add the following code after id='comments-block':

style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 150px; width:670px;'

The ones highlighted in green can be edited, depending on your preference.

The finished line of code should look something like this:

<dl id='comments-block' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 150px; width:778px;'>

IMPORTANT NOTE: You're NOT supposed to DELETE anything. You only need to add the code I mentioned on Step 3, okay?

SAVE SETTINGS.

Step 4:
Make sure your Blogger settings are correct:

Check if Post Pages is ON:
Settings -> Archiving -> Enable Post Pages? -> Set this to Yes
If you can't change this setting (it's grayed out), then, skip to Step 5.

Make sure your Comment Form is embedded below your post when visitors open your blog posts pages:
Settings -> Comments -> Comment Form Placement -> Embedded below post

Then, SAVE SETTINGS.

Step 5:
If you still can't see any comment form below your post after you've followed Step 4, then, you need to manually place a comment form below your blog post. Here's how:

Step 5.A:
Look for these lines of codes:

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

If you don't see this whole block on your template, simply use the highlighted keywords in blue.

If you find it, right after this block, paste the following lines of codes:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

SAVE SETTINGS.

That's it!

Now, if you encounter any problems implementing this on your blog, feel free to leave me a comment below and I'll get back to you as soon as I can.

I'd love to hear from you, too, if you got this working on your blog. A simple "thank you" would mean a lot. :)