Blog Comment Section Design

Blog Comment Section Design
Code Snippet:Comment Module
Author: vetri suriya
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 2,642
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X