ADMIN Ribbon Or Icon With Comments In Blogger

Blogger commenting system has always been flexible and provides the facility to their users to customize it their own way. There are number of features which can be easily customizable in blogger commenting system which gives a new and bright look to the entire conversation. Readers also enjoy the conversation if the commenting system is more advanced and highly modified. Today one of our readers asked that how can I add ADMIN Ribbon Or Icon With The Admin Comments in Blogger. So today this is special requested tutorial that we are going to share to show how easily you can implement this feature in Blogger Commenting System.

DEMO

Must Read This:

• Enable Threaded Comments In Blogger
• Enable Auto Numbering With The Threaded Comments In Blogger

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. (Click Here To See, How?)

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:

#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 URL which you have hosted at blogger or other hosting services.

• Read This: Hosting Images At Blogger

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.! :)