Add ADMIN Ribbon In Blogger Comments

Blogger commenting system has perpetually been versatile and provides the power to their users to customise it their own method. There square measure range of options which may be simply customizable in blogger commenting system which provides a brand new and bright look to the complete language. Readers conjointly fancy the language if the commenting system is additional advanced and extremely changed. these days one in all our readers asked that however am i able to add ADMIN Ribbon Or Icon With The Admin Comments in Blogger. therefore these days this can be special requested tutorial that we tend to square measure progressing to share to point out however simply you'll be able to implement this feature in Blogger Commenting System.

How To Add ADMIN Ribbon Or Icon With Comments In Blogger?

So let’s start with the tutorial:

1. Log-in to your Blogger Dashboard.
2. Go to Template > Backup. 

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag. Click ► to expand the code.

5. Then search for “COMMENTS” styles between </b:skin> and ]]></b:skin> tags.

6. You will find the code similar to this:1

 #comments .comment-author{
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child{
padding-top: 0;
border-top: none;
}
.comments .comment-content{ padding:5px 0;
}
.avatar-image-container{
margin: .2em 0 0;
}
#comments .avatar-image-container img{
border: 1px solid $(image.border.color);
}
.comment-actions a
{
font-size:11px; color:#777 !important
}
.comments .comments-content .user
{
font-size:16px; color:#000;
}
.comments .comments-content .datetime
{
font-size:11px; color:#777 !important
}
.comments .comments-content .datetime a
{
color:#777;
}
.comments .comments-content .comment-thread ol a
{
color:#000;}
.comments .comments-content .loadmore a{
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-block
{
border: 1px solid #ddd;
padding: 7px;
}
.comments .comment-thread.inline-thread{
background-color: $(post.footer.background.color);
}
.comments .continue a
{
background:#f9f9f9;width:130px;border:1px solid #ddd;border-radius:9px;
padding: 10px;color:#000;
}
.comments .continue{
border-top: 2px solid $(widget.alternate.text.color);
}
.comments h4{
font: $(post.title.font);
margin: .75em 0 0;
padding: 10px;
border: 1px solid #ddd;
width: 100px;
}
.comment-form
{
width:90%;
max-width:90%
}

7. Now copy & paste the following code, just below the Yellow Highlighted Code above.

 .comments .comments-content .icon.blog-author
{
background-repeat: no-repeat;
background-image: url (Your Ribbon Or Icon Image Link Goes Here);
height:38px;
width:38px;margin:0;
position:absolute;
right:0px;
top:-0px;} 

8. Click “SAVE TEMPLATE”.

You are all done. Refresh your blog to see the ADMIN RIBBON OR ICON with the comments.

Customization:

1. Replace “Your Ribbon Or Icon Image Link Goes Here” with your own Ribbon Or ICON image URLwhich you have hosted at blogger or other hosting services.

2. Adjust the width, height according to your own choice. 

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)