How to customize your comment box on blogger

its been a while that i posted stuffs on this blog and am very sorry and the reason is was made known to members on our whatsapp blog group. you can also join via this Link. if you have been visiting other sites which comments are allowed you must have noticed their comment box looks very different and more stylish much more looks better in sight compared to the default comment box on blogger. So on this post i would be personally dropping the scripts am using for mine and if possibly you like it you can also make use of it if it matches your template or you just want.

Procedure

• Firstly, log into your blogger account or profile
• Locate themes then click on EDIT HTML.

Read also:How to customize your scroll bar and text color

NOTE: Make sure you backup your templates in case of mistakes to roll back changes.

• You can make many changes to your blog via your HTML and at the same time mess everything on your blog. press CNTR+F to search using your pc and enter ]]></b:skin> and if possibly its not displaying the result just searcj Skin probably after pressing enter twice or trice it should bring ]]></b:skin>

 

• Then copy the codes below and paste it above ]]></b:skin>

Read also:How to add sharea and follow buttons to your blog

.comments h4
{
color:#ffffff;
display: inline-block !important;
background:#292832;
padding:10px;
}
.comments .comment .comment-actions a {
background:#292832;
border-radius: 5px;
color: #ffffff;
font:12px georgia;
margin-right: 8px;
padding:5px;
text-decoration: none !important;
}
.comments .comment .comment-actions a:hover {
background:#808080;
border-radius: 5px;
color: #292832;
font:12px georgia;
margin-right: 8px;
padding:5px;
text-decoration: none !important;
}
.comments .comment-block {
background:#f8f8f8;
border: 1px solid #f0f0f0;
padding: 10px;
}
.continue
{
border-top:none !important;
}
.continue a {
background:#292832;
border: 1px solid #292832;
border-radius:5px;
color: #ffffff;
display: inline-block !important;
margin-top: 8px;
padding:5px;
text-decoration: none !important;
font:12px georgia ,arial;
}
.comment-header a {
color: #222222 !important;
}
#comments .avatar-image-container img {
border:2px solid #292832;
border-radius: 50px 50px 50px 50px;
height: 58px;
max-width: 58px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #dcdcdc;
float: left;
margin-left: -20px;
max-height: 61px !important;
overflow: hidden;
width: 61px !important;
}

So if you followed the given scripts above carefully you should encounter no problem and if its not showing still with the stuff above then trying pasting the codes between ]]>-</b:skin>. like this

  ]]>THE SCRIPTS HERE</b:skin>.

So if the script worked for you kindly drop your comment.