Nếu muốn làm đẹp khung bình luận Blogger mà không thay hệ thống trả lời hoặc kiểm duyệt, hãy bắt đầu bằng CSS trên các phần tử có sẵn của theme. Cách này chỉ thay đổi phần trình bày; Blogger vẫn quản lý việc nhận, hiển thị và kiểm duyệt bình luận (theo support.google.com).
Kết quả mục tiêu là một vùng bình luận có nền riêng, viền nhẹ, bo góc, khoảng cách rõ ràng và không bị tràn ngang trên màn hình nhỏ. Tuy nhiên, code dưới đây là bộ selector tương thích tham khảo: mỗi theme có thể dùng cấu trúc HTML khác nhau. Nếu khung đổi nhưng form nhập không đổi, nguyên nhân có thể là form được tải trong iframe.
Chuẩn bị và sao lưu theme
- Một blog Blogger/Blogspot đang có bài viết cho phép bình luận.
- Tài khoản có quyền chỉnh sửa giao diện.
- Một bản sao lưu theme hiện tại.
- Một trình duyệt có thể mở blog ở thẻ riêng để kiểm tra sau khi lưu.
Trước khi sửa, vào Theme, mở menu cạnh giao diện đang dùng và tải xuống bản sao lưu. Nếu chưa từng sao lưu, hãy xem hướng dẫn sao lưu Blogger. Bản sao lưu là đường lui nếu bạn chèn nhầm CSS hoặc sửa trực tiếp HTML theme.
Google hướng dẫn chỉnh HTML của giao diện từ Theme > More > Edit HTML và lưu thay đổi tại đó (theo support.google.com). Tên nút có thể thay đổi nhẹ theo giao diện quản trị, nên hãy ưu tiên mục Customize hoặc Edit HTML đang hiển thị trong blog của bạn.
Kiểm tra thiết lập bình luận trước khi tạo khung
CSS không thể tạo ra phần tử bình luận nếu blog đang tắt bình luận hoặc bài viết không cho nhận xét. Nếu muốn form xuất hiện ngay dưới bài viết, hãy kiểm tra như sau:
- Đăng nhập Blogger và chọn đúng blog.
- Mở Settings > Comments.
- Tại Comment location, chọn Embedded nếu tùy chọn này có trong giao diện của bạn.
- Kiểm tra Who can comment để xác định người được phép gửi bình luận.
- Thiết lập Comment moderation nếu muốn duyệt bình luận trước khi công khai.
- Lưu thay đổi, sau đó mở một bài viết có bình luận để làm trang kiểm tra.
Embedded chỉ quyết định cách khu vực bình luận xuất hiện trong bài viết; nó không tự làm giao diện đẹp hơn. Nếu blog dùng vị trí bình luận khác, bạn vẫn có thể định dạng phần khung khi xác định đúng selector của theme.
Chèn mẫu CSS vào Blogger
Đối với người mới, hãy dùng ô CSS của giao diện trước vì cách này không yêu cầu sửa XML. Thực hiện trong bảng điều khiển Blogger:
- Vào Theme và chọn Customize.
- Mở Advanced, tìm nhóm hoặc ô nhập CSS bổ sung. Tên mục có thể khác tùy theme.
- Dán toàn bộ code bên dưới vào ô đó.
- Chọn Save, Apply to Blog hoặc nút lưu tương đương.
- Mở một bài viết có bình luận ở thẻ trình duyệt khác để xem kết quả.
Nếu theme không có ô CSS, có thể dùng Theme > Edit HTML. Khi đó, chèn phần CSS vào vùng stylesheet của theme, thường là bên trong <b:skin> theo cấu trúc sẵn có. Không dán nguyên thẻ <style> vào vị trí XML không chấp nhận thẻ này. Nếu chưa quen XML, hãy ưu tiên ô CSS tùy biến và giữ bản sao lưu mở để khôi phục.
/* ===== 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;
}
}Code trên không có giá trị bắt buộc phải thay trước khi lưu. Nếu muốn đổi thiết kế, chỉ thay các giá trị ở nhóm biến :root đầu đoạn code, giữ nguyên tên biến và dấu chấm phẩy.
Tùy chỉnh màu và độ bo góc
| Biến | Chức năng | Ví dụ giá trị |
|---|---|---|
--comment-bg | Nền của toàn bộ khung | #ffffff |
--comment-soft-bg | Nền từng bình luận và form | #f6f8fb |
--comment-border | Màu đường viền | #e2e8f0 |
--comment-text | Màu chữ chính | #263241 |
--comment-accent | Màu liên kết trả lời | #2563eb |
--comment-radius | Độ bo góc khung chính | 16px |
--comment-shadow | Độ nổi của khung | 0 8px 24px rgba(15, 23, 42, 0.07) |
Ví dụ dưới đây minh họa một bảng màu tối. Hãy thay toàn bộ các biến tương ứng trong phần :root, sau đó kiểm tra chữ, liên kết và vùng nhập trên cả nền sáng lẫn nền tối:
:root {
--comment-bg: #111827;
--comment-soft-bg: #1f2937;
--comment-border: #374151;
--comment-text: #f3f4f6;
--comment-muted: #9ca3af;
--comment-accent: #93c5fd;
--comment-accent-hover: #bfdbfe;
}Đây là ví dụ minh họa, không phải bộ màu bắt buộc. Nếu chữ hoặc liên kết khó đọc, hãy quay lại màu trước đó. Đừng ẩn liên kết quản trị, trả lời, xóa hoặc báo cáo chỉ để làm khung gọn hơn.
Kiểm tra kết quả trên bài viết thật
- Mở một bài viết đang cho phép bình luận.
- Tải lại trang sau khi lưu CSS. Nếu vẫn thấy kiểu cũ, thử tải lại mạnh bằng Ctrl + F5 trên Windows hoặc xóa bộ nhớ đệm của trình duyệt.
- Kiểm tra khung chính: nền, viền, bo góc và khoảng cách phải thay đổi.
- Kiểm tra một bình luận: tên, thời gian, nội dung và liên kết trả lời vẫn phải đọc được.
- Thu nhỏ cửa sổ hoặc mở trang trên điện thoại; nội dung không được tràn ngang.
- Thử mở form trả lời. Nếu bạn có thể mở form và các liên kết chức năng vẫn xuất hiện, mục tiêu định dạng cơ bản đã đạt.
Kết quả quan sát được cần là giao diện thay đổi nhưng chức năng cũ vẫn còn. Nếu blog yêu cầu đăng nhập hoặc kiểm duyệt trước khi hiển thị, đó là thiết lập của Blogger, không phải lỗi do CSS.
Khi CSS không áp dụng hoặc form không đổi
Theme dùng selector khác
Các selector như #comments, .comments và .comments-area là các điểm bắt đầu phổ biến trong mẫu này, nhưng theme của bạn có thể dùng tên khác. Mở blog, nhấp chuột phải vào vùng bình luận, chọn Inspect hoặc Kiểm tra, rồi tìm phần tử bao quanh toàn bộ khu vực.
Ví dụ, nếu phần tử bao quanh thực sự có class my-comments, hãy thêm một quy tắc riêng vào ô CSS của theme:
.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;
}Trong ví dụ này, .my-comments chỉ là tên minh họa. Bạn phải thay nó bằng class hoặc id đang xuất hiện trong công cụ kiểm tra của chính theme; không dán nguyên tên này nếu theme không có phần tử tương ứng.
Form nằm trong iframe
Để kiểm tra, dùng công cụ Inspect và xem form có nằm bên trong phần tử <iframe> hay không. CSS của theme bên ngoài thường không thể chọn các phần tử bên trong một iframe thuộc tài liệu khác. Vì vậy, khung và danh sách bình luận có thể đổi kiểu trong khi ô nhập hoặc nút gửi vẫn giữ giao diện cũ.
Đây là giới hạn của phạm vi CSS, không nhất thiết là lỗi code. Không nên thay iframe bằng form tự tạo chỉ để đồng bộ màu sắc nếu bạn chưa có thiết kế riêng cho lưu trữ bình luận, xác thực, chống spam và bảo mật dữ liệu.
Code làm lệch bố cục
Nếu trang bị tràn ngang hoặc cột bên bị đẩy xuống, hãy làm theo đường lui ngắn nhất:
- Xóa tạm khối CSS vừa thêm trong ô CSS hoặc khôi phục bản sao lưu nếu bạn đã sửa HTML.
- Lưu lại và tải lại bài viết để xác định bố cục có trở về bình thường không.
- Nếu đã bình thường, dán lại từng nhóm: khung chính, bình luận, form rồi media query.
- Dừng ở nhóm gây lỗi và kiểm tra selector,
width,paddinghoặc quy tắc ảnh hưởng quá rộng.
Nếu blog hiển thị mã nguồn hoặc báo lỗi sau khi sửa theme, hãy kiểm tra lại code giao diện trước khi lưu thêm thay đổi (theo support.google.com).
Khôi phục giao diện khi không muốn dùng CSS
Nếu bạn dán code vào ô CSS tùy biến, hãy xóa toàn bộ khối bắt đầu bằng /* ===== Khung bình luận Blogger ===== */ và kết thúc ở dấu ngoặc đóng của media query, rồi lưu lại. Sau đó mở bài viết có bình luận để xác nhận giao diện trở về trạng thái trước khi chỉnh.
Nếu đã sửa trực tiếp HTML theme và không nhớ vị trí code, hãy tải lại bản theme đã sao lưu thay vì xóa ngẫu nhiên các đoạn XML. Khi thêm tài nguyên bên ngoài, hãy ưu tiên URL https://; tài nguyên http:// có thể gây cảnh báo nội dung hỗn hợp trên blog HTTPS (theo support.google.com).
Dấu hiệu hoàn thành
- Khu vực bình luận có khung, màu nền, viền và khoảng cách phù hợp.
- Nội dung vẫn đọc rõ trên máy tính và màn hình nhỏ.
- Liên kết trả lời, quản trị hoặc kiểm duyệt không bị ẩn.
- Form bình luận vẫn mở được, hoặc bạn đã xác định form bị giới hạn bởi iframe.
- Bạn biết cách xóa khối CSS hoặc khôi phục bản sao lưu nếu không hài lòng.
Hãy bắt đầu bằng việc đổi màu, độ bo góc và bóng đổ. Chỉ chỉnh sâu hơn như avatar, cấp trả lời hoặc nút gửi sau khi bạn đã xác định đúng cấu trúc HTML của theme.
Nguồn tham khảo
