Hello, everyone! Welcome to the letmeask blog. Today, I’ll teach you how to put a cool and unique comment box on your Blogger blog, Step-by-step guide:
In Shorts: To customize the Blogger comment box, follow these steps:
- Log in to Blogger: Go to Blogger.com and log in to your account.
- Access Theme Customization: From the Blogger dashboard, select the blog you want to customize, then click on “Theme” in the left menu.
- Edit HTML/CSS: Click the “Edit HTML/CSS” option to access your blog’s code.
- Find “]]></b:skin>” Code: Locate the code for the comment box in your blog’s HTML. It’s usually under the “]]></b:skin>” section.
- Customize CSS: To change the appearance, you can add custom CSS styles. Modify the CSS styles related to the comment box to suit your preferences. You can change fonts, colors, borders, etc.
- Save Changes: After customizing the comment box, make sure to save your changes.
- Preview and Publish: Click “Preview” to see how the comment box looks. If you’re satisfied, click “Apply to Blog” to publish the changes.
Remember to backup your template before making any changes, and be cautious when editing HTML/CSS if you’re not familiar with coding to avoid breaking your blog’s layout.
In this tutorial, we’ll learn how to give your Blogger blog’s comment box a unique look. The comment box is where your visitors can share their thoughts about what they read or view on your blog, whether it’s blog posts, videos, presentations, images, GIFs, and more.
Typically, Blogger comment boxes have a standard design. When you install custom themes or modify the default Blogger theme, the comment box often remains the same.
However, in this post, I’ll provide you with a CSS code that allows you to customize and create a different design for your Blogger blog’s comment box. Let’s get started!
Steps to customise Blogger comments box
Step 1: Let’s start by going to your Blogger blog’s dashboard. Click on the “Theme” option. Then, click the “Customize” drop-down button, and choose the “Edit HTML” option.
Step 2: In this step, click anywhere in the code, and then press the Ctrl+F button on your keyboard to find the “]]></b:skin>” code. Once you locate it, create some space above this code. Now, paste the custom comment box CSS code into this space. Finally, click the “Save” button to save your changes.
Step 3: This is the final step, copy the below code and paste just above the }}></b:skin> and click on save.
CSS Code for customise Blogger Comment Box
.comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;} .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px;} .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px;} .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px;} .comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;} .comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;} .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;} .comments .comments-content .comment:first-child { padding-top: 0px;} .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;} .comments .comments-content .icon.blog-author { background-image: none;}Final step: Now open your blog and check whtere it modified or not, I hope this article is useful for you, If you feel any trouble plz comment,
How to Customize Blogger Comment Box without CSS Code
Customizing the comment box in Blogger allows you to personalize its appearance and functionality. Here’s a step-by-step guide on how to do it:
1. Log in to Your Blogger Account:
- Go to Blogger.
- Sign in with your Google account if you’re not already logged in.
2. Access the Blogger Dashboard:
- After signing in, you’ll land on the Blogger dashboard.
3. Choose Your Blog:
- If you have multiple blogs, select the blog where you want to customize the comment box from the list on the left-hand side.
4. Go to the Comment Settings:
- In the left sidebar, click on “Settings” for the selected blog.
- Then, click on “Posts, comments, and sharing” under the “Settings” menu.
5. Configure Comment Settings:
- In the “Posts, comments, and sharing” settings, scroll down to the “Comments” section.
- Here, you’ll find various options to customize your comment box:
- Comment Location: Choose whether you want comments to appear on a separate page or embedded below the post.
- Who Can Comment: Configure who can comment on your blog (anyone, registered users, or only members of the blog).
- Comment Moderation: Enable comment moderation to review and approve comments before they appear on your blog.
- Show word verification: Add an extra layer of security by enabling word verification for comments.
- Comment Form Message: Customize the message displayed above the comment form.
- Show profile images on comments: Enable or disable profile images for commenters.
- Comment Form Placement: Choose whether the comment form appears at the top or bottom of the comments.
- Comment Notification Email: Specify the email address where you want to receive comment notifications.
6. Save Your Settings:
- After making your desired changes, click the “Save settings” button to apply them.
7. Customize Comment Box Styling (Optional):
- If you want to further customize the appearance of the comment box, you can do so using CSS.
- To do this, go to “Theme” > “Edit HTML” in the Blogger dashboard.
- In the HTML code, you can add custom CSS styles to modify the comment box’s fonts, colors, spacing, and more. Make sure to have some basic knowledge of CSS for this step.
- Always make a backup of your template before editing HTML in case you need to revert to the original settings.
8. Preview and Test:
- Before finalizing your customizations, preview a blog post to see how the comment box appears to readers.
- Test the comment functionality to ensure it works as expected.
9. Publish Your Changes:
- Once you’re satisfied with your customizations, click the “Save” or “Save theme” button to publish your changes.
That’s it! You’ve successfully customized the comment box on your Blogger blog. Remember to regularly monitor and engage with comments to foster a vibrant community on your blog.
How do I change the color of the comment box in Blogger?
To change the color of the comment box in Blogger, go to your Blogger dashboard, select your blog, and then navigate to “Theme” > “Customize” > “Advanced” > “Add CSS.”
In the CSS editor, you can add custom CSS code to modify the comment box’s background color.
For example, to change the background color to blue, you can add:
#comment-editor {
background-color: #3498db; /* Replace with your desired color code */
}
How do I change the font size of the text in the comment box?
To change the font size of the text in the comment box, you can add custom CSS. In your Blogger dashboard, go to “Theme” > “Customize” > “Advanced” > “Add CSS” and enter CSS code like this:
.comment-form-textarea {
font-size: 16px; /* Replace with your desired font size */
}
Adjust the font-size value to your preferred text size.
How can I add a custom message above the comment box?
Its really too much easy to add any type of custom message just above the your blogger blog comment box, Let’s follow these steps:
You can add a custom message above the comment box by modifying the comment form message in Blogger settings. In your Blogger dashboard, go to “Settings” > “Posts, comments, and sharing.” In the “Comment Form Message” field, enter your desired custom message.
For example, you can say, “We love hearing from our readers! Please leave your comments below.” After saving your settings, this message will appear above the comment box on your blog posts. Remember to save your changes and preview your blog to ensure the customizations appear as intended.
I hope 🤞 you enjoy this article: Thank you for reading! We appreciate your time and hope you found this post valuable. Stay tuned for more informative content in the future.
