Blogging tipsblogspot guidesSEOTraffic and Monetization

How To add a custom stylish comments box for blogspot blogs.

Why you should have a stylish blogger comment box

Everyone knows how boring and non-user friendly the Blogger default comments box can be. Let’s now learn how to create an attractive comments box for Blogger.

Before we move on to our procedures, I’ll like to inform you that comments are an important ranking factor.

Comments along with social shares and likes help improve prove user engagement. You should also know that the more user engagement you have, the higher value the of your blog or website.

Make time to read:  How To Sign-up As an affiliate on Impact-Radius affiliate network without stress.

Before I make you yawn, let’s get to the part where we learn how to add a custom stylish comments box for blogspot blogs already.

Step by step guide on adding the custom sylish blogger comment box

  • First of all, Log in to your blogger dashboard.
  • log into blogger dashboard
  • Then Navigate to the template section as seen on the image below
  • Click on Edit HTML
  • Click around the Code and Press Ctrl+F

when you do this, a search box pops up just around the top right corner of the code area.

  • place your cursor in the box and Search for “ ]]></b:skin>” (without the quotations) by pressing the enter key.
  • Now copy this code highlighted below (the code is just after the image in this post) .
  • After copying it place your cursor just above ” ]]></b:skin>” as shown in the image below.
  • Paste it there.
  • Click the save theme button.
Make time to read:  Konga Affliate sign-up 

.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 { background-image: none;}

You should have a beautiful comment box right on any post in your blog after this procedure.

sharing is caring

Related Articles

6 thoughts on “How To add a custom stylish comments box for blogspot blogs.”

Leave a Reply

Your email address will not be published. Required fields are marked *



Adblock Detected

Please consider supporting us by disabling your ad blocker