Blogger Comment Section Styling That Invites Replies

Your posts get steady traffic, but the comment area under each one looks like an afterthought: tiny grey text, avatars squashed into odd sizes, and replies that run off the edge on phones. A neglected Blogger comment section quietly tells readers nobody is listening, and most will not bother to type a reply.

The good news is that most of the fixes are a mix of settings and a few lines of CSS. None of them require rewriting your template, and all of them can be undone in seconds if something looks wrong.

Start with the Blogger comment section settings

Before touching any code, open Settings in the Blogger dashboard and scroll to the Comments block. Four options shape what readers see:

• Comment location: Choose Embedded. It shows the form directly below the post and supports threaded replies. Full page and Pop-up windows send readers away from the article, which cuts reply rates.
• Who can comment: "Users with Google Accounts" blocks most spam. "Anyone" brings in more comments and more junk, so pair it with moderation.
• Comment moderation: "Sometimes" with a window of 14 days lets you approve new comments on fresh posts while older ones are held. Many small blogs do fine with "Always" and a quick daily check.
• Comment form message: Write one short line that invites a specific reply, such as "Tell me which step tripped you up." A question gets more answers than "Leave a comment."

Back up before you edit the template

Go to Theme, open the menu next to Customize, and choose Backup to download the XML file. It takes ten seconds and is your undo button. Our checklist on what to back up before changing your Blogger theme lists the gadgets and settings that do not live inside that file.

For the styling below, add CSS through Theme, Customize, Advanced, Add CSS where your template supports it. That keeps your changes separate from the core template and survives most theme updates. If the option is missing in your theme, paste the CSS at the end of the skin section in Edit HTML, just before the closing b:skin tag.

CSS fixes that make comments readable

Class names vary between templates, so right-click a comment in Chrome or Firefox and choose Inspect to confirm what yours uses. Most Blogger themes, including Contempo, Soho, Emporio and Notable, use classes close to these.

Fix the text size and line height

Comment text is often set at 12 or 13 pixels. Bring it up to match your body text, usually 16 to 18 pixels, with a line height around 1.6:

.comment-content { font-size: 16px; line-height: 1.6; }

Give each comment some space

A margin of 20 to 24 pixels between comments and a thin border make threads easy to scan:

.comment { padding: 16px 0; border-bottom: 1px solid #e5e5e5; }

Square up the avatars

Blogger pulls profile images at mixed sizes. Forcing a fixed size with a round crop keeps the column neat:

.avatar-image-container img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

Stop replies from running off mobile screens

Deep threads indent each level. On a 360 pixel wide phone, three levels of 40 pixel indents leave very little room. Limit the indent on small screens:

@media (max-width: 600px) { .comment-replies { margin-left: 12px; } }

Check the result on a real phone, not only the desktop preview, and test a post with at least three levels of replies so you see the worst case. If your theme switches layout at a different width, change the 600px value to match the breakpoint your template already uses.

Match the comment area to your brand

Use the same link color in comments as in your posts so the "Reply" and author name links feel part of the page. The steps in changing Blogger link color in any template apply here too. Style the post author's own replies differently so readers can spot them. Many themes add a class such as blog-author to those comments, which lets you give them a light background tint.

The counter-take: do not swap in a third-party comment system

A common suggestion in blogging forums is to replace native Blogger comments with an outside commenting plugin as soon as you want a nicer look. I would hold off. Those systems add external scripts that load on every post, often 300 KB or more, and some show ads or tracking on free plans. They also store comments outside Blogger, so if you switch later, migrating them back can be messy or impossible.

Native comments are lighter, indexable with your post, and fully yours. For most blogs, 20 lines of CSS gets you 90 percent of the visual improvement without the extra weight.

What you cannot change, and how to live with it

The comment form itself loads inside an iframe from Blogger's servers. That means your CSS cannot restyle the text box, the "Comment as" menu or the Publish button. Fonts and colors inside the form follow Blogger's defaults.

Work around it by styling everything around the form: the heading above it, the message line, and the spacing. A clear heading such as "Join the conversation" with a 24 pixel margin above the form does more for replies than any button color.

Keep the conversation going after the fix

Design gets readers to the form. Your own replies keep them coming back. Answer every genuine comment within 48 hours if you can, even with a single line, because readers who get a reply are far more likely to comment again. Ask a follow-up question in your reply when it makes sense, so the thread grows rather than stopping.

Clear out spam weekly in the Comments section of the dashboard. A thread full of link drops makes the whole post look abandoned, no matter how good the styling is. If your blog has several writers, agree on a simple reply style so the comment area sounds consistent. Our piece on making a template consistent for multiple authors covers the visual side of that.

Frequently asked questions

Why is my Blogger comment section not showing?

Check that comments are enabled under Settings, then open the post editor and confirm "Allow" is selected under Comments in the post settings panel. Some custom templates also hide the comment block on certain layouts. Switching briefly to a default theme in preview shows whether the template is the cause.

How do I enable threaded replies in Blogger comments?

Set comment location to Embedded in Settings. Threaded replies only work with the embedded form. Older templates may also need an updated comments widget, which a theme reset or newer template provides.

Can I change the font in the Blogger comment form?

Not inside the form, because it loads in an iframe that your CSS cannot reach. You can change the font of the posted comments and the heading around the form. Most readers notice those far more than the input box.