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:


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:


AND this one:

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:

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


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


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:


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:


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

  • Hi there –

    I’m writing to let you know about LogMeIn’s FreeMeUp Giveaway, promoting the benefits of simple and secure remote computer access.

    On July 28, we announced our FreeMeUp Giveaway – where users can win iPhones, iPod touches, HP Netbooks – all loaded with our LogMeIn Ignition application, and hundreds of LogMeIn t-shirts and hats.

    And the best part of this

  • Aww. kinda off-topic but thanks. However, I'm not eligible for the prizes.

    Some of my readers might.

  • My blog still is very small…but this is so useful ! I’m keeping the information !

    Thank you so much !!!!!

  • Hello Lovely! How are you going? Just wondering how you went with finding out how to make the comments box visible on the main page of the blog?? It’s certainly an interesting thing to try to find… not having much luck finding anything online to help! I see it a lot on websites, and private blogs, not blogspot etc. Wonder if there is a way?!

  • Hayley:
    I’m still testing on how to do that on Blogger.
    Can you give me the websites and private blogs where you saw the comments on the main page so I can check them out?

  • Test

  • Sorry about the above comment ~ I tried to send you a message and for some reason it wouldn’t post… all sorted now apparently!

    Here are two of the sites with the scrolling comments that I am after…
    I am quite sure both blogs were built by the same company, who also designed websites for both of these ladies! Thanks again!!

  • Hayley:
    unfortunately, both sites are not hosted on Blogger so they didn’t use any kind of Blogger hack. however, i’ll still try to figure out if it can be done on Blogger.

    i’ll keep you posted. 🙂

  • Anonymous

    thanks a lot.. very helpful

  • Thanks for this hack.. i've been use it..

  • Wicked, thanks for that 🙂