This HTML, CSS, and JavaScript code snippet helps you to design the comment section on your blog/website. It comes with user avatars, names, timestamps, comments, and like buttons. Users can like comments, and the code handles updating like counts when a like button is clicked. It’s helpful for adding a user-friendly comment section to a website.
How to Create Blog Comment Section Design
1. First, create an HTML structure for your comment section. In the provided code, we have used a main element and a section with the class comment-module to contain our comments.
<main>
<section class="comment-module">
<ul>
<li>
<div class="comment">
<div class="comment-img">
<img src="https://rvs-comment-module.vercel.app/Assets/User Avatar.png" alt="">
</div>
<div class="comment-content">
<div class="comment-details">
<h4 class="comment-name">Adamsdavid</h4>
<span class="comment-log">20 hours ago</span>
</div>
<div class="comment-desc">
<p>I genuinely think that Codewell's community is AMAZING. It's just starting out but the templates on there amazing.</p>
</div>
<div class="comment-data">
<div class="comment-likes">
<div class="comment-likes-up">
<img src="https://rvs-comment-module.vercel.app/Assets/Up.svg" alt="">
<span>2</span>
</div>
<div class="comment-likes-down">
<img src="https://rvs-comment-module.vercel.app/Assets/Down.svg" alt="">
<span></span>
</div>
</div>
<div class="comment-reply">
<a href="#!">Reply</a>
</div>
<div class="comment-report">
<a href="#!">Report</a>
</div>
</div>
</div>
</div>
<ul>
<li>
<div class="comment">
<div class="comment-img">
<img src="https://rvs-comment-module.vercel.app/Assets/User Avatar-1.png" alt="">
</div>
<div class="comment-content">
<div class="comment-details">
<h4 class="comment-name">saramay</h4>
<span class="comment-log">16 hours ago</span>
</div>
<div class="comment-desc">
<p>I agree. I've been coding really well (pun intended) ever since I started practicing on their templates hehe.</p>
</div>
<div class="comment-data">
<div class="comment-likes">
<div class="comment-likes-up">
<img src="https://rvs-comment-module.vercel.app/Assets/Up.svg" alt="">
<span>5</span>
</div>
<div class="comment-likes-down">
<img src="https://rvs-comment-module.vercel.app/Assets/Down.svg" alt="">
<span></span>
</div>
</div>
<div class="comment-reply">
<a href="#!">Reply</a>
</div>
<div class="comment-report">
<a href="#!">Report</a>
</div>
</div>
</div>
</div>
<ul>
<li>
<div class="comment">
<div class="comment-img">
<img src="https://rvs-comment-module.vercel.app/Assets/User Avatar-2.png" alt="">
</div>
<div class="comment-content">
<div class="comment-details">
<h4 class="comment-name">Jessica21</h4>
<span class="comment-log">14 hours ago</span>
</div>
<div class="comment-desc">
<p>Okay, this comment wins.</p>
</div>
<div class="comment-data">
<div class="comment-likes">
<div class="comment-likes-up">
<img src="https://rvs-comment-module.vercel.app/Assets/Up.svg" alt="">
<span>5</span>
</div>
<div class="comment-likes-down">
<img src="https://rvs-comment-module.vercel.app/Assets/Down.svg" alt="">
<span></span>
</div>
</div>
<div class="comment-reply">
<a href="#!">Reply</a>
</div>
<div class="comment-report">
<a href="#!">Report</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="comment">
<div class="comment-img">
<img src="https://rvs-comment-module.vercel.app/Assets/User Avatar-3.png" alt="">
</div>
<div class="comment-content">
<div class="comment-details">
<h4 class="comment-name">andrew231</h4>
<span class="comment-log">20 hours ago</span>
</div>
<div class="comment-desc">
<p>Thanks for making this, super helpful</p>
</div>
<div class="comment-data">
<div class="comment-likes">
<div class="comment-likes-up">
<img src="https://rvs-comment-module.vercel.app/Assets/Up.svg" alt="">
<span>2</span>
</div>
<div class="comment-likes-down">
<img src="https://rvs-comment-module.vercel.app/Assets/Down.svg" alt="">
<span></span>
</div>
</div>
<div class="comment-reply">
<a href="#!">Reply</a>
</div>
<div class="comment-report">
<a href="#!">Report</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</main>
Inside the section element, you can add individual comments as list items (<li>) with user avatars, names, timestamps, comments, and like buttons.
2. The CSS code is responsible for styling the comment section. It sets the overall layout, styles the avatars, and positions the various elements. It also makes the comment section responsive.
You can include this CSS in a separate file or within a <style> block in your HTML file. Make sure to link to the required fonts from Google Fonts.
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
* ul {
list-style: none;
}
* a {
text-decoration: none;
}
body{
background: #abd1c6;
}
main {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
main section.comment-module {
width: 50%;
height: auto;
background: #fff;
margin: 100px 0px;
border-radius: 5px;
padding: 50px 75px;
}
main section.comment-module ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 50px;
margin-left: 0px;
}
main section.comment-module ul li {
width: 100%;
position: relative;
}
main section.comment-module ul li .comment {
width: 100%;
display: flex;
column-gap: 20px;
}
main section.comment-module ul li .comment .comment-img {
width: 7%;
}
main section.comment-module ul li .comment .comment-img img {
width: 50px;
height: 50px;
}
main section.comment-module ul li .comment .comment-content {
width: 93%;
display: flex;
flex-direction: column;
row-gap: 12px;
}
main section.comment-module ul li .comment .comment-content .comment-details {
width: 100%;
display: flex;
column-gap: 15px;
align-items: center;
justify-content: flex-start;
}
main section.comment-module ul li .comment .comment-content .comment-details .comment-name {
text-transform: capitalize;
}
main section.comment-module ul li .comment .comment-content .comment-details .comment-log {
color: #7a7a7a;
font-size: 14px;
}
main section.comment-module ul li .comment .comment-content .comment-data {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 20px;
}
main section.comment-module ul li .comment .comment-content .comment-data .comment-likes {
display: flex;
align-items: center;
column-gap: 12px;
}
main section.comment-module ul li .comment .comment-content .comment-data .comment-likes > div {
display: flex;
column-gap: 4px;
align-items: center;
}
main section.comment-module ul li .comment .comment-content .comment-data .comment-likes > div img {
cursor: pointer;
}
main section.comment-module ul li .comment .comment-content .comment-data .comment-likes > div span {
font-weight: 600;
}
main section.comment-module ul li .comment .comment-content .comment-data .comment-reply a, main section.comment-module ul li .comment .comment-content .comment-data .comment-report a {
color: #272727;
font-weight: 400;
}
main section.comment-module ul li::before {
content: "";
position: absolute;
top: 60px;
left: 50px;
transform: translateX(-25px);
width: 2px;
height: calc(100% - 60px);
background: #c5c5c5;
}
main section.comment-module ul li ul {
margin-top: 35px;
margin-left: 70px;
width: calc(100% - 70px);
}
@media screen and (max-width: 1600px) {
main section.comment-module {
width: 60%;
}
}
@media screen and (max-width: 1400px) {
main section.comment-module {
width: 70%;
}
main section.comment-module ul li .comment .comment-img {
width: 10%;
}
main section.comment-module ul li .comment .comment-content {
width: 90%;
}
}
@media screen and (max-width: 1024px) {
main section.comment-module {
width: 80%;
}
}
@media screen and (max-width: 768px) {
main section.comment-module {
width: 96%;
padding: 75px 10px;
}
main section.comment-module ul li .comment {
column-gap: 12px;
}
main section.comment-module ul li .comment .comment-img {
width: 15%;
}
main section.comment-module ul li .comment .comment-img img {
width: 40px;
height: 40px;
}
main section.comment-module ul li .comment .comment-content {
width: 85%;
}
main section.comment-module ul li .comment .comment-content .comment-details {
flex-direction: column;
align-items: flex-start;
}
main section.comment-module ul li .comment .comment-content .comment-data {
column-gap: 12px;
}
main section.comment-module ul li::before {
top: 50px;
left: 50px;
transform: translateX(-30px);
height: calc(100% - 60px);
}
main section.comment-module ul li ul {
margin-top: 25px;
margin-left: 50px;
width: calc(100% - 50px);
}
}
3. The JavaScript code handles the like functionality for each comment. It collects all the like buttons and adds event listeners to them. When a like button is clicked, it updates the like count for that comment.
let likesUpParent = document.getElementsByClassName("comment-likes-up");
let likesDownParent = document.getElementsByClassName("comment-likes-down");
let likesEl = [];
for(let i = 0; i<likesUpParent.length; i++) {
let likesUp = likesUpParent[i].getElementsByTagName("img")[0];
let likesDown = likesDownParent[i].getElementsByTagName("img")[0];
likesEl.push(likesUp, likesDown);
}
likesEl.forEach(el => {
el.addEventListener("click", function() {
let likesClosestCountEl = this.parentElement.getElementsByTagName("span")[0];
let likesCount = likesClosestCountEl.innerText;
if(likesCount.trim().length === 0) {
let likesCount = 0;
}
likesClosestCountEl.innerText = +likesCount + +1;
})
})
That’s all! hopefully, you have successfully created a comment section design on your blog/website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Expand Text on Hover Using CSS- Linear Gradient Glowing Button CSS
- Draggable Div Element in HTML CSS & JavaScript
- Scroll-driven Animations in Pure CSS
- Social Icons with Circular Profile Pic in CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.