Create a Better-Looking Blogger Comment Box with CSS

If you want to improve the appearance of a Blogger comment box without replacing the reply or moderation system, start with CSS applied to the theme’s existing elements. This changes presentation only; Blogger continues to manage comment submission, display, and moderation (according to support.google.com).

The target result is a comment area with its own background, a subtle border, rounded corners, clear spacing, and no horizontal overflow on small screens. However, the code below is a reference set of broadly compatible selectors: each theme may use a different HTML structure. If the container changes but the input form does not, the form may be loaded inside an iframe.

Prepare and back up the theme

A Blogger/Blogspot blog with at least one post that allows comments.
An account with permission to edit the theme.
A backup of the current theme.
A browser that can open the blog in a separate tab for testing after you save.

Before making changes, go to Theme, open the menu next to the active theme, and download a backup. If you have never created a backup, see the Blogger backup guide. The backup gives you a way back if you insert CSS incorrectly or edit the theme’s HTML directly.

Google explains how to edit a theme’s HTML from Theme > More > Edit HTML and save changes there (according to support.google.com). Button names may vary slightly in the admin interface, so use the Customize or Edit HTML option shown in your blog.

Check the comment settings before creating the box

CSS cannot create a comment element if comments are disabled for the blog or the post does not allow comments. If you want the form to appear directly below the post, check the following:

Sign in to Blogger and select the correct blog.
Open Settings > Comments.
Under Comment location, select Embedded if this option is available in your interface.
Check Who can comment to identify who is allowed to submit comments.
Configure Comment moderation if you want to review comments before they are published.
Save the changes, then open a post with comments to use as your test page.

Embedded only determines how the comment area appears in the post; it does not improve the design by itself. If the blog uses a different comment location, you can still style the container once you identify the theme’s correct selector.

Insert the CSS sample in Blogger

For beginners, use the theme’s CSS field first because this does not require editing XML. Do this from the Blogger dashboard:

Go to Theme and select Customize.
Open Advanced, then find the group or field for additional CSS. The name of this section may vary by theme.
Paste all of the code below into that field.
Select Save, Apply to Blog or the equivalent save button.
Open a post with comments in another browser tab to view the result.

If the theme does not have a CSS field, you can use Theme > Edit HTML. In that case, insert the CSS into the theme’s stylesheet area, usually inside <b:skin> following the existing structure. Do not paste the complete <style> tag into an XML location that does not accept it. If you are not familiar with XML, use the custom CSS field instead and keep the backup available for restoration.

/* ===== Khung bình luận Blogger ===== */

:root {
  --comment-bg: #ffffff;
  --comment-soft-bg: #f6f8fb;
  --comment-border: #e2e8f0;
  --comment-text: #263241;
  --comment-muted: #718096;
  --comment-accent: #2563eb;
  --comment-accent-hover: #1d4ed8;
  --comment-radius: 16px;
  --comment-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Vùng bao chính */
#comments,
.comments,
.comments-area {
  width: 100%;
  max-width: 860px;
  margin: 36px auto 0;
  padding: 24px;
  box-sizing: border-box;
  color: var(--comment-text);
  background: var(--comment-bg);
  border: 1px solid var(--comment-border);
  border-radius: var(--comment-radius);
  box-shadow: var(--comment-shadow);
}

/* Tiêu đề khu vực bình luận */
#comments h4,
#comments .title,
.comments h4,
.comments .title {
  margin: 0 0 20px;
  color: var(--comment-text);
  font-size: 1.35rem;
  line-height: 1.4;
  font-weight: 700;
}

/* Bỏ kiểu danh sách mặc định */
#comments ol,
#comments ul,
.comments ol,
.comments ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Từng bình luận */
#comments .comment-block,
#comments .comment-thread li,
.comments .comment-block,
.comments .comment-thread li {
  margin: 0 0 16px;
  padding: 18px;
  background: var(--comment-soft-bg);
  border: 1px solid var(--comment-border);
  border-radius: 12px;
}

/* Khu vực tên và thời gian */
#comments .comment-header,
.comments .comment-header {
  margin-bottom: 10px;
  line-height: 1.5;
}

#comments .comment-header a,
#comments .comment-header cite,
.comments .comment-header a,
.comments .comment-header cite {
  color: var(--comment-text);
  font-weight: 700;
  text-decoration: none;
}

#comments .comment-header .datetime,
#comments .comment-header .timestamp,
.comments .comment-header .datetime,
.comments .comment-header .timestamp {
  display: block;
  margin-top: 3px;
  color: var(--comment-muted);
  font-size: 0.84rem;
  font-weight: 400;
}

/* Nội dung bình luận */
#comments .comment-content,
.comments .comment-content {
  color: var(--comment-text);
  font-size: 0.98rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

#comments .comment-content p,
.comments .comment-content p {
  margin: 0 0 10px;
}

#comments .comment-content p:last-child,
.comments .comment-content p:last-child {
  margin-bottom: 0;
}

/* Liên kết trả lời, xóa hoặc báo cáo */
#comments .comment-actions a,
#comments .comment-reply a,
.comments .comment-actions a,
.comments .comment-reply a {
  color: var(--comment-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

#comments .comment-actions a:hover,
#comments .comment-reply a:hover,
.comments .comment-actions a:hover,
.comments .comment-reply a:hover {
  color: var(--comment-accent-hover);
  text-decoration: underline;
}

/* Khoảng cách cho bình luận trả lời */
#comments .comment-replies,
.comments .comment-replies {
  margin: 14px 0 0 28px;
}

/* Khu vực thông báo và form */
#comments .comment-form,
#comments .comment-form-thread,
.comments .comment-form,
.comments .comment-form-thread {
  margin-top: 22px;
  padding: 18px;
  background: var(--comment-soft-bg);
  border: 1px dashed var(--comment-border);
  border-radius: 12px;
}

/* Một số theme cho phép định dạng trực tiếp ô nhập */
#comments input[type="text"],
#comments input[type="email"],
#comments textarea,
.comments input[type="text"],
.comments input[type="email"],
.comments textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  color: var(--comment-text);
  background: #ffffff;
  border: 1px solid var(--comment-border);
  border-radius: 10px;
  outline: none;
  font: inherit;
}

#comments input:focus,
#comments textarea:focus,
.comments input:focus,
.comments textarea:focus {
  border-color: var(--comment-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Hiển thị tốt hơn trên điện thoại */
@media (max-width: 600px) {
  #comments,
  .comments,
  .comments-area {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
  }

  #comments .comment-block,
  #comments .comment-thread li,
  .comments .comment-block,
  .comments .comment-thread li {
    padding: 14px;
    border-radius: 10px;
  }

  #comments .comment-replies,
  .comments .comment-replies {
    margin-left: 12px;
  }
}

The code above does not contain any values that must be changed before saving. If you want to change the design, edit only the values in the variable group :root at the beginning of the code, and keep the variable names and semicolons unchanged.

Customize the colors and corner radius

Variable	Function	Example value
`--comment-bg`	Background of the entire frame	`#ffffff`
`--comment-soft-bg`	Background of each comment and the form	`#f6f8fb`
`--comment-border`	Border color	`#e2e8f0`
`--comment-text`	Primary text color	`#263241`
`--comment-accent`	Reply-link color	`#2563eb`
`--comment-radius`	Main frame corner radius	`16px`
`--comment-shadow`	Frame elevation	`0 8px 24px rgba(15, 23, 42, 0.07)`

The example below illustrates a dark color scheme. Replace all corresponding variables in :root, then check the text, links, and input area against both light and dark backgrounds:

:root {
  --comment-bg: #111827;
  --comment-soft-bg: #1f2937;
  --comment-border: #374151;
  --comment-text: #f3f4f6;
  --comment-muted: #9ca3af;
  --comment-accent: #93c5fd;
  --comment-accent-hover: #bfdbfe;
}

This is an illustrative example, not a required color scheme. If the text or links are difficult to read, restore the previous colors. Do not hide administration, reply, delete, or report links merely to make the frame more compact.

Check the result on an actual post

Open a post where comments are enabled.
Reload the page after saving the CSS. If the old styling still appears, try a hard reload with Ctrl + F5 on Windows, or clear the browser cache.
Check the main frame: the background, border, corner radius, and spacing should have changed.
Check a comment: the name, timestamp, content, and reply link should remain readable.
Make the window narrower or open the page on a phone; the content must not overflow horizontally.
Try opening the reply form. If you can open the form and the functional links are still visible, the basic formatting objective has been met.

The observable result should be a changed appearance with the existing functionality preserved. If the blog requires sign-in or moderation before comments appear, that is a Blogger setting, not a CSS error.

When the CSS does not apply or the form does not change

The theme uses different selectors

Selectors such as #comments, .comments and .comments-area are common starting points in this example, but your theme may use different names. Open the blog, right-click the comment area, select Inspect or Inspect, then find the element surrounding the entire area.

For example, if the surrounding element actually has the class my-comments, add a separate rule to the theme’s CSS field:

.my-comments {
  width: 100%;
  max-width: 860px;
  margin: 36px auto 0;
  padding: 24px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

In this example, .my-comments is only an example name. You must replace it with the class or id shown in your theme’s own inspection tool; do not paste this name as-is if your theme has no corresponding element.

Form inside an iframe

To check, use the Inspect tool and see whether the form is inside an <iframe> element. CSS outside the theme generally cannot select elements inside an iframe that belongs to another document. As a result, the frame and comment list may change style while the input field or submit button retains its old appearance.

This is a limitation of CSS scope and does not necessarily indicate a code error. Do not replace the iframe with a custom form solely to match the colors unless you have your own design for comment storage, authentication, spam prevention, and data security.

Code that disrupts the layout

If the page overflows horizontally or the sidebar is pushed down, take the shortest rollback path:

Temporarily remove the CSS block you just added from the CSS field, or restore the backup if you edited the HTML.
Save and reload the post to determine whether the layout has returned to normal.
If it has, paste the groups back one at a time: the main frame, comments, form, and then the media query.
Stop at the group causing the problem and check the selector, width, padding or any rule with an overly broad effect.

If the blog displays source code or reports an error after you edit the theme, review the theme code before saving any further changes (according to support.google.com).

Restore the layout if you no longer want to use the CSS

If you pasted the code into the custom CSS field, delete the entire block beginning with /* ===== Khung bình luận Blogger ===== */ and ending at the closing brace of the media query, then save it. Open a post with comments afterward to confirm that the layout has returned to its pre-edit state.

If you edited the theme HTML directly and cannot remember where the code is, reload the saved theme backup instead of randomly deleting XML sections. When adding external resources, prefer URLs beginning with https://; resources using http:// may trigger a mixed-content warning on an HTTPS blog (according to support.google.com).

Signs that you are finished

The comment area has an appropriate frame, background color, border, and spacing.
The content remains easy to read on both desktop and small screens.
Reply, administration, and moderation links are not hidden.
The comment form still opens, or you have determined that the form is limited by an iframe.
You know how to remove the CSS block or restore the backup if you are not satisfied.

Start by changing the colors, corner radius, and box shadow. Make deeper changes, such as styling avatars, reply levels, or the submit button, only after you have identified the theme’s HTML structure correctly.

How to Create a Better-Looking Blogger Comment Box with CSS