Home > Blogspot > Blogspot > Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot
Cần 2 bạn dịch bài về C#, Winform, .NET ... nói chung là viết bài về các công nghệ sử dụng code C#. Yêu cầu phải có kiến thức nên tảng lĩnh vực bạn chọn, nhuận bút 50k / bài. inbox mình nếu có nhu cầu nhé.

Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách thiết kế giao diện bình luận bằng mã CSS trên [Blogspot], đây là một thủ thuật rất hữu ích mà các bạn cần nên biết và áp dụng cho trang blog của mình.

Thời gian qua Blogspot đã tiến hành áp dụng giao diện bình luận mới cho các trang blog của mình. Đối với người dùng, các bạn hoàn toàn có thể chỉnh sửa và thiết kế lại giao diện bình luận trên trang blog của mình để tạo thêm sự ấn tượng và độc đáo đối với người xem khi truy cập vào.

Với giao diện mới này, mọi nhận xét chính và bình luận trả lời sẽ được trình bày một cách thông minh và khoa học. Đối với nhận xét của Quản trị viên hoặc tác giả bài viết sẽ được gắn thêm huy hiệu để giúp phân biệt nhận xét cụ thể rõ ràng hơn.

Vì thế nếu chưa biết cách thực hiện thì mình sẽ hướng dẫn các bạn các bước để thiết kế giao diện bình luận bằng mã CSS trên Blogspot trong bài viết sau đây.

1. Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot

Các bước thực hiện như sau:

Bước 1: Bạn truy cập vào trang blog của mình và nhấn vào phần Chủ đề > Chỉnh sửa HTML.

thiet ke giao dien binh luan PNG

Bước 2: Bây giờ một đoạn mã sẽ xuất hiện, bạn nhấn vào đó và dùng phím tắt Ctrl + F để tìm kiếm dòng mã sau: ]]> </ b: skin>

thiet ke giao dien binh luan 1 PNG

Bước 3: Khi đã xác định dòng mã này bạn hãy dán đoạn mã dưới đây vào phía trên dòng mã vừa tìm kiếm được:

#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#eb1e1e}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111}

.comment-thread a{color:#777}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e}

.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://www.techprevue.com/wp-content/uploads/2013/07/red-author.png);width:36px;height:36px}

.comments .comments-content .inline-thread{padding:0 0 0 20px}

.comments .comments-content .comment-replies{margin-top:0}

.comments .comment-content{padding:5px 0;line-height:1.4em}

.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}

.comments .comment-thread.inline-thread .comment{width:auto}

.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}

.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}

.comments .comment-thread.inline-thread .comment-block{margin-left:48px}

.comments .comment-thread.inline-thread .user a{font-size:13px}

.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}

.comments .continue{border-top:0;width:100%}

.comments .continue a{padding:10px 0;text-align:center}

.comment .continue{display:none}

#comment-editor{width:100%!important}

.comment-form{width:100%;max-width:100%}

Bước 4: Nhấn vào Lưu chủ đề để hoàn tất.

thiet ke giao dien binh luan 2 PNG

2. Thiết kế avatar hình tròn

Để thay đổi màu sắc cho avatar bình luận, bạn phải thay đổi mã Hex tương ứng # eb1e1e, bạn có thể chọn một trong các huy hiệu tác giả cho sẵn bằng cách nhấn chuột phải vào hình ảnh, sao chép liên kết hình ảnh và thay đổi mã CSS (Hiển thị màu đỏ).

Để làm cho ảnh đại diện thành hình tròn, thì bạn hãy thêm dòng mã sau vào đoạn mã của bước 3 ở phần trên:

.comments .avatar-image-container{border-radius: 50%;}

Kết quả sẽ như thế này:

thiet ke giao dien binh luan 3 PNG

Vậy là mình đã hướng dẫn các bạn cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot đơn giản nhất. Mong rằng bài viết này sẽ hữu ích đối với các bạn. Chúc các bạn thực hiện thành công!

Profile photo of adminAnhQuoc

AnhQuoc

Xin chào các bạn! Mình là Anh Quốc. Tham gia viết bài với mong muốn chia sẻ kiến thức đến mọi người.

BÀI VIẾT

notice png LIST home png HOME hot gif BÁO
LỖI
top png TOP