Sunday, 17 May 2015

#Add ADMIN Ribbon In Blogger Comments

Add ADMIN Ribbon In Blogger Comments
#Blogger commenting system has perpetually been versatile and provides the power to their users to customize it their own method 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.

Add ADMIN Ribbon In Blogger Comments

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. 

One Of The Admin Tag
http://4.bp.blogspot.com/-ldD3I6iRKco/UbyU8rN4A0I/AAAAAAAAHJk/Pu2ez-RkPeA/s1600/admin.png 

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

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks