How to add Custom CSS Style to Recent Comments on Widget Blogger Blog

How to Style the Comments Section with Custom CSS on Your Blogger Blog

In this tutorial, we will guide you on how to style the comments section and the pagination buttons on your Blogger blog using custom CSS. By applying CSS styles, you can enhance the design of comments and make your blog look more engaging and professional.

How to Show Recent Comments in your Blog

Step 1: Understand the Structure of the Comments

Before we dive into the CSS styling, it’s important to understand the basic structure of the comments in Blogger. Here is a simplified structure for each comment:

      
        <div class="comment-item">
          <div class="avatar">😊</div>
          <div class="comment-content">
            <strong>John Doe</strong>
            <p>This is a comment.</p>
            <small>Posted on March 19, 2025</small>
          </div>
        </div>
      
    

This is a simplified version of the structure, and we can target each of these elements to apply custom styles like the comment’s avatar, the content, the author's name, and the comment date.

Step 2: Add Custom CSS to Style Your Comments

Now, let's add the custom CSS for the comment section and pagination buttons. You can add this CSS to your Blogger theme by following these steps:

1. Log in to your Blogger account and select your blog.
2. Navigate to the Layout section in the sidebar.
3. Click on " Gadget or Widget" where you already added the comment script
4. In the pop-up window, scroll down and add your custom css style

Here is the updated CSS code:

      
        /* Comments Section Styling */
        .comment-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 20px;
          padding: 15px;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .comment-item:hover {
          transform: scale(1.02);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #4CAF50;
          color: white;
          font-size: 24px;
          text-align: center;
          line-height: 50px;
          margin-right: 15px;
        }

        .comment-content {
          flex: 1;
        }

        .comment-content strong {
          font-size: 1.1em;
          color: #333;
          font-weight: bold;
        }

        .comment-content p {
          font-size: 1em;
          color: #555;
          margin: 10px 0;
        }

        .comment-content small {
          font-size: 0.85em;
          color: #777;
        }

        .comment-content a.view-button {
          display: inline-block;
          margin-top: 10px;
          padding: 8px 15px;
          background-color: #007bff;
          color: white;
          text-decoration: none;
          border-radius: 5px;
          font-weight: bold;
        }

        .comment-content a.view-button:hover {
          background-color: #0056b3;
          text-decoration: underline;
        }

        /* Pagination Buttons Styling */
        #comment-pagination {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 20px;
        }

        #comment-pagination button {
          padding: 10px 15px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 1em;
        }

        #comment-pagination button:hover {
          background-color: #0056b3;
        }

        #comment-pagination button:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }
      
    

Step 3: Explanation of the CSS Code

Here’s a breakdown of the CSS rules and how they affect the design of the comments section and pagination buttons:

• .comment-item: This is the container for each comment. It uses `flexbox` to align the avatar on the left and the content on the right, providing a clean layout. The hover effect increases the shadow and slightly scales up the comment for a modern feel.
• .avatar: The commenter's avatar is styled as a circle with a background color and centered text. It now appears on the left side of the comment content, and we added a `margin-right` to space it from the text.
• .comment-content: This is where the comment's text, the author's name, and the date are displayed. The `flex: 1` ensures that the content takes up the remaining space next to the avatar.
• strong: The commenter's name is highlighted using a bold and larger font for emphasis.
• p: The comment text is styled in a softer gray for better readability, with spacing between the paragraphs.
• small: This targets the comment date and styles it smaller and lighter to indicate it’s less important than the comment itself.
• a.view-button: This adds a styled button that links to view the full post. It has a blue background with white text, and a hover effect makes it more interactive.
• #comment-pagination: The pagination section is styled with a flexbox to align the buttons in the center. Each pagination button has padding, background color, and hover effects to make them visually appealing.
• #comment-pagination button:disabled: This style applies to disabled pagination buttons, which will be grayed out to indicate that they are inactive.

Step 4: Test the New Comment Styles

After applying the custom CSS, visit your blog to see the changes. You should notice that the avatar now appears on the left side of the comment, and the layout is cleaner and more modern.

If you don’t see the changes immediately, try refreshing your page or clearing your browser’s cache.

Alternative Method: Adding the CSS Directly to the Blogger Template

If you prefer, you can add the CSS directly into your Blogger template. Follow these steps:

1. Log in to your Blogger account.
2. Go to Theme and click on Edit HTML.
3. Locate the <head> section and add the CSS code within a <style> tag.
4. Save the changes and view your blog to see the updates.

Example:

      
        <style>
          /* Paste your CSS code here */
        </style>